react-autocomplete icon indicating copy to clipboard operation
react-autocomplete copied to clipboard

id passed to the inputProps breaks the dropdown

Open mousemke opened this issue 6 years ago • 0 comments

if you pass an id to the inputProps, when you click on an option in the menu, firefox has a habit of keeping the menu open instead of closing it.

      <div
        className={className}
      >
        <label htmlFor={id}>
          <Typography className={classes.label} variant="caption">
            {label}
          </Typography>
          <AutoComplete
            ref={(el: ?HTMLInputElement) => (this.input = el)}
            getItemValue={getItemValue}
            inputProps={{
              ...inputProps,
              onBlur: (e: SyntheticInputEvent<HTMLInputElement>) => {
                const input = e.target;
                const value = input.value;
                onBlur(input, value);
              },
              onFocus: (e: SyntheticInputEvent<HTMLInputElement>) => {
                const input = e.target;
                const value = input.value;

                setTimeout(() => input.select(), 0);
                onFocus(input, value);
              },
              id, // dropdown does not close with this line
            }}
            items={items}
            onChange={onChange}
            onSelect={(matchedValue: string, valObj: ItemObject) => {
              onSelect(matchedValue, valObj);
              setTimeout(() => this.input && this.input.blur(), 0);
            }}
            shouldItemRender={shouldItemRender}
            sortItems={sortItems}
            renderItem={(item: ItemObject, isHighlighted: boolean) =>
              renderItem(item, isHighlighted, classes)
            }
            renderMenu={renderMenu}
            value={value}
          />
        </label>
      </div>

reproducing:

  • click on the input
  • type a couple letters
  • click on one of the options

(related-ish to #269)

mousemke avatar Feb 24 '19 13:02 mousemke