Suggestion list is removed when more than one dropdown is available

[lorenc-tomasz]

Hi,
I have noticed issue with multiple dropdown when at least one of have onChangeText implemented and it changes parent's state.

1. Add at least two dropdowns within the same component.
2. Implement onChangeText that will set state e.g.

onChangeText={(text) => {
setState(text); 
}}

3. Setting the state will cause re-render of component with dropdowns.
4. This useEffect will be called for each dropdown:

    useEffect(() => {
      if (isOpened && Array.isArray(dataSet)) {
        if (activeInputRef) {
          activeInputRef.current = containerRef.current
        }

        setContent(
          <Dropdown
            {...{
              ...props,
              direction,
              inputHeight,
              dataSet,
              suggestionsListMaxHeight,
              renderItem,
              ListEmptyComponent
            }}
          />
        )
      } else {
        setContent(undefined)
      }
    }, [
      isOpened,
      dataSet,
      props,
      direction,
      inputHeight,
      suggestionsListMaxHeight,
      renderItem,
      ListEmptyComponent,
      activeInputRef,
      setContent
    ])

5. As other dropdowns will not be openend the setContent(undefined) will be called and suggestion list will be hidden from the view.

6. The easiest fix I have found was to add check to mentioned useEffect :

    const close = () => {
      setIsOpened(false)
      setDirection(props.direction)
      setContent(undefined)
      activeInputRef.current = null <-- reset active ref
    }

    useEffect(() => {
      // check if active ref is the correct one
      if (activeInputRef.current && activeInputRef.current !== containerRef.current) {
        return;
      }

      if (isOpened && Array.isArray(dataSet)) {
        if (activeInputRef) {
          activeInputRef.current = containerRef.current
        }

with this check useEffect will not be called for not active input.

Can you please look into this, please?

[harshilmobmaxime]

@lorenc-tomasz all previous changes, change on node_modules/react-native-autocomplete-dropdown then run command "yarn patch-package react-native-autocomplete-dropdown" that can be work for me

[imarsiglia]

I have the same problem and need to use 5 Dropdowns in the same view. When searching in autocomplete the application becomes extremely slow and the list appears for a few seconds and then disappears. @lorenc-tomasz able to find any solution?

[vijayanandof]

@onmotion Any updates or work around for this bug?

[onmotion]

@vijayanandof I'll try to reproduce