PF4: Custom Select Component: Type-ahead select (single item)

tlabaj commented 5 years ago

This issue covers the Type-ahead select (single item) variation of the Custom Select only: (This issue is a child of issue #1206 )

On hold until the Single select variation is complete (issue #1214 )

Related issue in Core: patternfly/patternfly-next#651

Info provided on the component: https://docs.google.com/document/d/1rrCdARutABI-Vpa_mdMWGl2xJJTtt2dPQ2bjFx2zwCM/edit?usp=sharing

see: https://pf-next.com/components/Select/examples/

In addition to a React review, this issue should be reviewed by the core contributors: CSS: @srambach (CSS) @mcarrano (interaction design) @christiemolloy (visual design)

priley86 commented 5 years ago

Doing some PF3 typeahead integration work recently in CNV, I noted some of the following things about the React API surface. Would just like to share these for consideration as we begin to review this React component.

The existing Typeahead supports both synchronous and asynchronous functionality. I would consider synchronous to be most pressing for our needs there first. The API of props here for our existing Typeahead and AsyncTypeahead would be good to consider as you start to implement the API. https://github.com/ericgio/react-bootstrap-typeahead/blob/master/docs/Props.md
Sample usage and some notes:
```
<TypeAhead
      id={id}
      labelKey={choicesLabelKey}
      defaultValue={defaultValue}
      placeholder={placeholder}
      choices={choices}
      multiple={multiple}
      selected={value}
      onChange={onChange}
      onBlur={onBlur}
      disabled={disabled}
    />
```
This sort of synchronous typeahead would support some default cases that could be used immediately (with multiple variation a nice-to-have for later since this issue pertains to single item). It is important to note that this existing API surface allows the choices prop to be an array of strings OR an array of objects. If an array of objects is provided (such as a simple key/value array):
```
[{ id: 1, name: 'fedora29' }, { id: 2, name: 'fedora28' }]
```
the React component should look at the labelKey prop to determine which object property to render for its label (in this case, the labelKey prop would be name). The onChange callback would of course return an object instead of a string in this scenario...

Some additional design notes we found were that the React Bootstrap Typeahead did not support copy/paste selection (the user needed to tab and press enter after pasting the copied string which matched the typeahead selection). I am not sure about PF design intent/accessibility guidelines on this, but it would be interesting to consider. From a JS standpoint, I assume you could crawl the labelKeys and auto select, but I do not typically see this with other typeahead components I've used in the past. It seems that the user should clearly be able to distinguish the selection state of the item after selection occurs.

downstream pr in kubevirt w/ pf3

Hope this helps as you get started and happy to review further w/ you!

priley86 commented 5 years ago

some other interesting autocomplete/typeahead implementations for React "in the wild". Downshift is a great library to consider as well: https://material-ui.com/demos/autocomplete/

dgutride commented 5 years ago

Closed via https://github.com/patternfly/patternfly-react/pull/1839

patternfly / patternfly-react

PF4: Custom Select Component: Type-ahead select (single item) #1215