zIndex not set correclty

[Snotax]

Hi, in your web example, the dropdown is hidden behind other components that are below it in the DOM hirarchy. Are you aware of this issue ?

[saralorena92]

I had the same problem. I solve it adding:

suggestionsListContainerStyle={{ position: 'relative', top: 0 }}

[jomann09]

I was having this same issue but I'm not even sure what resolved it, setting the style={{ zIndex: 1 }} of the View wrapping my AutocompleteDropdown actually did end up fixing it. The examples at the bottom of the readme with the style set with zIndex like Platform.select({ ios: { zIndex: 10 } }) are only setting it for ios, setting mine for web worked.

<View style={[{ marginBottom: 20 }, Platform.select({ ios: { zIndex: 1 }, web: { zIndex: 1 } })]}>
            <Text>Header</Text>
            <AutocompleteDropdown
              dataSet={[
                { id: '1', title: 'Alpha' },
                { id: '2', title: 'Beta' },
                { id: '3', title: 'Gamma' },
              ]}
              />
          </View>

Setting the container style for me moved the form fields below because of the position set to relative.

[eylonxx]

I had the same problem. I solve it adding:

suggestionsListContainerStyle={{ position: 'relative', top: 0 }}

While this somewhat solves it, it is still making the suggestionbox relative meaning it "takes up space" in the page and pushing all other elements down.. Anyone knows how to achieve a floating suggestionbox-style? (intended behaviour)?

[Marcuspo]

I had the same problem. I solve it adding: suggestionsListContainerStyle={{ position: 'relative', top: 0 }}

While this somewhat solves it, it is still making the suggestionbox relative meaning it "takes up space" in the page and pushing all other elements down.. Anyone knows how to achieve a floating suggestionbox-style? (intended behaviour)?

same problem

[mustapha1509]

The right solution is here Wrap the Autocomplete with View and set zIndex to 10 or higher

<View
            style={[styles.section, Platform.select({ ios: { zIndex: 10 } })]}>
            <Text style={styles.sectionTitle}>First</Text>
            <AutocompleteDropdown
              dataSet={[
                { id: '1', title: 'Alpha' },
                { id: '2', title: 'Beta' },
                { id: '3', title: 'Gamma' },
              ]}
            />
          </View>
          <View
            style={[styles.section, Platform.select({ ios: { zIndex: 9 } })]}>
            <Text style={styles.sectionTitle}>Second</Text>
            <AutocompleteDropdown
              dataSet={[
                { id: '1', title: 'Alpha' },
                { id: '2', title: 'Beta' },
                { id: '3', title: 'Gamma' },
              ]}
            />
          </View>

[NadiaMit]

The right solution is here Wrap the Autocomplete with View and set zIndex to 10 or higher

<View
            style={[styles.section, Platform.select({ ios: { zIndex: 10 } })]}>
            <Text style={styles.sectionTitle}>First</Text>
            <AutocompleteDropdown
              dataSet={[
                { id: '1', title: 'Alpha' },
                { id: '2', title: 'Beta' },
                { id: '3', title: 'Gamma' },
              ]}
            />
          </View>
          <View
            style={[styles.section, Platform.select({ ios: { zIndex: 9 } })]}>
            <Text style={styles.sectionTitle}>Second</Text>
            <AutocompleteDropdown
              dataSet={[
                { id: '1', title: 'Alpha' },
                { id: '2', title: 'Beta' },
                { id: '3', title: 'Gamma' },
              ]}
            />
          </View>

This didn't work for me at first, but i also had an additional outer View around all my Autocomplete fields (that all have their own View around for style purposes). Once adding zIndex: 1 in that said outer View around all the Autocomplete fields, and removing the zIndex from the Autocomplete fields Views, it worked for me (on Android at least, haven't tried on iOS yet).

<View style={{zIndex: 1}}>
    </View //another style without zIndex>
      <AutocompleteInput
      dataSet={[
          { id: '1', title: 'Alpha' },                 
          { id: '2', title: 'Beta' },          
          { id: '3', title: 'Gamma' },             
       ]}
      />
    </View>
    <View //another style without zIndex>
      <AutocompleteInput
        dataSet={[
            { id: '1', title: 'Alpha' },                 
            { id: '2', title: 'Beta' },          
            { id: '3', title: 'Gamma' },             
         ]}
    />
    </View>
 </View>

[kasaiee]

I have the problem now in android

[onmotion]

please try v3