Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Question] - Picker with custom header(Search input): Need two taps to select item when focus is on search input.

See original GitHub issue

Hi, I’m implementing a picker with a search input in the header and I noticed that after a search I need two taps to pick an item.

Dependencies versions

node: v8.0.0
npm: 4.6.1
"native-base": "2.7.2",
"react": "16.4.2",
"react-native": "0.56.0",

Expected behaviour

I was expecting the item to be picked with one tap like it’s done when the search box is not focus. expected

Actual Behaviour

First tap to hide the keyboard
Second one to select an item

issue-2

Is the bug present in both iOS and Android or in any one of them?

I’m currently only working on iOS platform.

Code snippet

Segment

const {selected, onValueChange, cities, searchCity, onGoingSearch} = props;

<Segment style={styles.segment}>
  <Left
    style={{
      flexShrink: 1,
      flexGrow: 1,
      flexBasis: "100%",
      paddingLeft: 10,
    }}
  >
    <Picker
      renderHeader={backAction => (
        <PickerHeader
          handleSearchInput={searchCity}
          backAction={backAction}
        />
      )}
      style={{
        backgroundColor: "rgba(216, 216, 216, 0.21)",
        borderRadius: 25,
        height: 40,
        marginBottom: 5,
      }}
      mode="dropdown"
      textStyle={{
        color: "white",
        paddingLeft: 20,
        fontSize: 16,
      }}
      placeholder="Select your city"
      placeholderStyle={{color: "white", paddingLeft: 15}}
      iosIcon={
        <Right>
          <Icon
            name="ios-arrow-down-outline"
            style={{
              color: "white",
              paddingRight: 15,
              fontSize: 20,
            }}
          />
        </Right>
      }
      selectedValue={selected}
      onValueChange={onValueChange}
    >
      {onGoingSearch && cities.length === 0 ? (
        <View>
          <Text>
            No city Matching your search.
          </Text>
        </View>
      ) : (
        cities.map(city => (
          <Picker.Item label={city.name} value={city.id} key={city.id} />
        ))
      )}
    </Picker>
  </Left>

  <Button
    transparent
    style={{
      flexShrink: computeShrinkForSearchButton(),
      flexGrow: 2,
      flexBasis: "100%",
      borderColor: "transparent",
    }}
  >
    <Text
      style={{
        color: "#7ED321",
        paddingLeft: 10,
        paddingRight: 5,
        fontWeight: "bold",
      }}
    >
      Search
    </Text>
  </Button>
</Segment>

PickerHeader

const PickerHeader = props => (
  <LinearGradient colors={["#020A15", "#032655"]} style={styles.LinearGradient}>
    <Header style={styles.header} hasSegment>
      <StatusBar backgroundColor="transparent" barStyle="light-content" />


      <Left style={styles.headerLeft}>
        <Button transparent onPress={props.backAction}>
          <Icon name="arrow-back" style={{color: "white", fontSize: 25}} />
        </Button>
      </Left>

      <Body style={styles.headerBody}>
        <Title style={styles.headerBodyTitle}>
          Select your city
        </Title>
      </Body>

      <Right style={styles.headerRight} />
    </Header>

    <Segment
      style={{
        backgroundColor: "transparent",
        paddingTop: 5,
        marginBottom: 10,
      }}
    >
      <Item style={styles.searchBox}>
        <Icon name="search" style={styles.searchBoxIcon} />
        <Input
          placeholder="Search"
          style={styles.searchBoxInput}
          onChangeText={props.handleSearchInput}
        />
      </Item>
    </Segment>
  </LinearGradient>
);

Any other additional info which would help us debug the issue quicker.

When searching I found this issue: https://github.com/GeekyAnts/NativeBase/issues/1117 where the solution was to set: keyboardShouldPersistTaps=‘handled’ to the content component.

I had a look at the picker code and it seems to not use Content to render the items: https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/Picker.ios.js#L197

So I’m wondering how I could fix that issue in my case.

Issue Analytics

State:
Created 5 years ago
Comments:30 (18 by maintainers)

Top GitHub Comments

1reaction

SupriyaKalghatgicommented, Aug 23, 2018

Still cant find code snippet with issue description

0reactions

patrick-stevenokcommented, Apr 17, 2019

@ngouass, did you somehow manage to fix this issue?

Top Results From Across the Web

<input>: The Input (Form Input) element - HTML

The default value for checkboxes and radio buttons is on . dirname. Valid for text and search input types only, the dirname attribute...

Easy Checks – A First Review of Web Accessibility - W3C

Easy Checks – A First Review of Web Accessibility. Introduction. This page helps you start to assess the accessibility of a web page....

jquery input select all on focus - Stack Overflow

Try using click instead of focus . It seems to work for both mouse and key events (at least on Chrome/Mac):. jQuery <...

User Interface - App Inventor

ListView; Notifier; PasswordTextBox; Screen; Slider; Spinner; Switch; TextBox; TimePicker; WebViewer. Button. Button with the ability to detect clicks ...

Links - Usability & Web Accessibility - Yale University

Assistive technology users may find navigating through several links a bad experience. Instead, provide one link. Either select one element to be the...