On selecting row modal-dropdown is not closing automatically in recat-native version 0.63

[vidhichandrakar]

unable to close dropdown automatically after selection

[donni106]

is it working with older react native version for you? are you using expo? does this happen for both, iOS and Android?

[Zalizyaka-Ney]

I have a similar issue with React 0.63.4 on Android in debug mode. After opening a dropdown I am unable to select an option, can only close a modal by back or by clicking outside (sometimes the selection works, but only once, after reopening a dropdown the issue is here again).

Adding renderRowComponent={TouchableOpacity} to props fixed this for me. It seems that there are problems on this version of React with TouchableHighlight, which is used by default.

[astraeapark]

Hi there,

anyone fixed it?

• Issues

  Modal dropdown is unable to select and not closing automatically.

• Environment

  react-native: 0.64.2 react-native-modal-dropdown: ^1.0.1 environment: Android (without Expo)

          {/* working */}
          <ModalDropdown ref={el => this.dropdown_1 = el}
            style={styles.dropdown_fac}
            options={['option 1', 'option 2', 'option 3']}
            onSelect={(idx, value) => console.log(idx, value)}
          />

          {/*  not working*/}
          <ModalDropdown ref={el => this.dropdown_2 = el}
            style={styles.dropdown_fac}
            options={['option 1', 'option 2', 'option 3']}
            onSelect={(idx, value) => console.log(idx, value)}
            renderRow={(rowData, rowID, highlighted) => {
              return (
                <TouchableHighlight underlayColor='cornflowerblue' style={{ padding: 20 }}>
                  <Text>
                    {rowData}
                  </Text>
                </TouchableHighlight>)
            }}
          />

+add alternative

cuz not closed automatically i added hide function. but it's not onSelect() called.

          <ModalDropdown 
            ref={el => this.dropdown_3 = el}
            options={['option 1', 'option 2', 'option 3']}
            onSelect={(idx, value) => {console.log(idx, value); return true;}}
            renderRow={(rowData, rowID, highlighted) => {
              return (
                <TouchableHighlight underlayColor='cornflowerblue' onPress={()=>{this.dropdown_3.select(rowID); this.dropdown_3.hide();}} >
                <Text>
                  {`${rowData}`}
                </Text>
              </TouchableHighlight>)
            }}
          />

[donni106]

      {/*  not working*/}
      <ModalDropdown ref={el => this.dropdown_2 = el}
        style={styles.dropdown_fac}
        options={['option 1', 'option 2', 'option 3']}
        onSelect={(idx, value) => console.log(idx, value)}
        renderRow={(rowData, rowID, highlighted) => {
          return (
            <TouchableHighlight underlayColor='cornflowerblue' style={{ padding: 20 }}>
              <Text>
                {rowData}
              </Text>
            </TouchableHighlight>)
        }}
      />

i think this is related to renderin a touchable inside a touchable. the package puts the content of renderRow inside a touchable. so please try to set just your <Text> and then onSelect should work i think:

renderRow={(rowData, rowID, highlighted) => {
  return (
    <Text>
      {`${rowData}`}
    </Text>
  )
}}

+add alternative

cuz not closed automatically i added hide function. but it's not onSelect() called.

          <ModalDropdown 
            ref={el => this.dropdown_3 = el}
            options={['option 1', 'option 2', 'option 3']}
            onSelect={(idx, value) => {console.log(idx, value); return true;}}
            renderRow={(rowData, rowID, highlighted) => {
              return (
                <TouchableHighlight underlayColor='cornflowerblue' onPress={()=>{this.dropdown_3.select(rowID); this.dropdown_3.hide();}} >
                <Text>
                  {`${rowData}`}
                </Text>
              </TouchableHighlight>)
            }}
          />

when you use the select method, onSelect ist not called, which is documented:

Methods

Method	Description
select(idx)	Select the specified option of the idx. Select -1 will reset it to display defaultValue. Won't trigger onSelect.