Skip to content
This repository has been archived by the owner on Jul 19, 2019. It is now read-only.

id passed to the inputProps breaks the dropdown #378

Open
mousemke opened this issue Feb 24, 2019 · 0 comments
Open

id passed to the inputProps breaks the dropdown #378

mousemke opened this issue Feb 24, 2019 · 0 comments

Comments

@mousemke
Copy link

mousemke commented Feb 24, 2019

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)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant