moroshko/react-autowhatever

Accessible rendering layer for Autosuggest and Autocomplete components

React Autowhatever

Accessible rendering layer for Autosuggest and Autocomplete components.

Demo

Check out the Homepage and the Codepen examples.

Installation

yarn add react-autowhatever

or

npm install react-autowhatever --save

Related

• react-autosuggest - WAI-ARIA compliant React autosuggest component

License

MIT

react-autowhatever's Issues

make list bounded when using arrows

Right now using up and down arrows on list rendered by autowhatever causes "null" value at the end of list. It would be nice if there would be possibility of using only available values when using arrows.

Example: https://jsfiddle.net/b6m0frgs/9/

Type 'a' -> press arrow key down (you see 'Apple') -> press arrow key down (you see 'Banana') -> press arrow key down (you see 'Cherry') -> press arrow key down (you see 'a')

So maybe instead of last 'a' there should be 'Apple' again.
This could be configurable by a flag. What do you think? It will be nice thing to have in react-autosuggest

Cheers,
Michał

Set "key" on item

Hi, I am using the react-autosuggest and I saw in the react warnings

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Item`. See https://fb.me/react-warning-keys for more information.
    in b (created by Item)
    in Item (created by ItemsList)
    in ul (created by ItemsList)
    in ItemsList (created by Autowhatever)

I think you should just put the key of the itemList map index instead of the optional theme..
Here

<Item
                **key={itemIndex}**
                {...allItemProps}
                sectionIndex={sectionIndex}
                itemIndex={itemIndex}
                item={item}
                renderItem={renderItem}
                renderItemData={renderItemData} />

Sorry I was too in a rush to make a PR...

Unique Keys Required For All Themeable Elements

Per react-themeable:

Note: A unique key for each themed element is required for Radium to work correctly.

I've noticed that I can't get rid of the browser's default focus ring around the input field for react-autosuggest using Radium. When I start to trace through, I notice that this project doesn't provide unique key props to all of the elements using react-themeable.

Need to add unique key props to all themeable elements to make this actually compatible with Radium.

Cannot type while JAWS is enabled on IE11

Issue Description

JAWS 2019 (Screen Reader) cannot enter forms mode when you tab into the component on IE11. This means you cannot type at all in the component while the screen reader is open.

JAWS Version: 2019.1906.10
IE11 Version: 11.0.9600.19463

Reproducible Demo

Editor URL: https://stackblitz.com/edit/react-9nd9ga
APP URL: https://react-9nd9ga.stackblitz.io/

Steps to Reproduce

1. Launch JAWS 2019 and view the demo using the app url on IE11
2. Use the keyboard to navigate to the component

Expected Behaviour

Expected a "bop" sound to be made, and can start typing in the input

Actual Behaviour

The "bop" sound does not play, and you cannot type anything in the input

Possible Solution

I've done some investigations and it appears to be because role=combobox is set in the container instead of the input. By moving the mentioned attribute and the ones related to it inside the input tag, it allows JAWS to correctly enter forms mode.

How to use custom scrollbar components with react-autowhatever?

I can't find any markups to wrap custom scrollbar components with search suggestion? How do I can customize the scrollbar?

Using async items inside mapDispatchToProps

Hi @moroshko,

first, many thanks for react-autowhatever. Great work. And great name.

I’m having difficulties with onMouseDown and onKeyDown(case: 'Enter').
They access items inside mapDispatchToProps, as in items[focusedItemIndex].

My items are loaded asynchronously.
The actions inside mapDispatchToProps can’t find the items, which are Redux state, and they stay undefined.

Any suggestion on how to correctly tie the items coming from the state to those functions?

Here’s my component if you’d like to see the context: https://gist.github.com/gusaiani/afd56e4655e2aca83859

Thanks in advance for your help.

Make a suggestion always highlighted

Previously requested (but then closed by requestor) here. Currently, pressing down on the last item in the list causes no suggestions to be highlighted until another arrow key press. I'd like to be able to have it immediately cycle back to the first one. This could be configurable via a prop.

I'd be happy to submit a PR for this.

Customize renderSuggestion on react-autosuggest

Hi, awesome work on this. It does 99% of what I need it to do but it appears there is one place it falls short: highlighting the matching string against what the user is searching for. Here: https://github.com/moroshko/react-autowhatever/blob/master/src/Item.js#L71 I want to be able to insert customizable HTML here versus just having a string.

For my purposes this would be used for highlighting matching search results by value stored in state and wrapping the matched string in <strong> tags.

Remove componentWillReceiveProps, React 16.9.0 deprecates it.

React 16.9.0 deprecates the componentWillReceiveProps lifecycle method and throws warnings for it use.

Looking through Autowhatever.js, it appears it is only used for computing theme, sectionItems and sectionIterator. These could be moved to the render function, and if it is expensive, could be memoized.

Any plans to add support for contenteditable divs in the future?

It would be awesome to use this to build functionality where the input element can accept rich text (@mentions, tagging, etc.). Since <input> is only plain text, the only way to do it would be with <div contenteditable="true"></div>. Any plans on supporting this in the future?

Add accessibility support for ItemsList

Add id attributes (or other attributes) to the <ul in <ItemsList>.

https://i.imgur.com/n2IbiWo.png

Firefox accessibility issue checker

The new beta Firefox accessibility issue checker is suggesting that the listbox element be labeled. There is no way to currently label that element because <label>Results<ul ...>...</ul></label> does not seem to work.

<ul {...props.itemsListProps}>
<ul id={props.itemsListId}>
<ul aria-label={props.itemsListLabel}>

<Container>
  <label htmlFor={props.itemsListId}>Results</label>
   {children} // <ul ...>...</ul>
</Container>

This is in concern with react-autosuggest.

Please remove this issue - Thank you!

** Removed **

Problem with ensureFocusedSuggestionIsVisible

Hi @moroshko,

I'm using the react-autosuggest component and applying the following two styles to the suggestionsContainer in my theme in order to get a scrollable dropdown when there are enough suggestions to exceed 300px:

.autosuggest-menu-outer {
  max-height: 300px;
  overflow: auto;
}

A recent change to react-autowhatever seemed to introduce a bug where if I scroll down in the list and then move my mouse pointer to the top element I can get the list to scroll by itself all of the way to the top of the list without ever touching the mouse wheel. I've been able to reproduce this on a variety of platforms and browsers (currently on Mac Chrome), but it seemed to be more serious in Windows. Looking at the code in ensureFocusedSuggestionIsVisible, it seems that it will autoscroll to align the top of a focused item to the container. The bug is likely around this logic as even after the initial alignment I seem to be able to get it to then align to the previous item indefinitely. When I built react-autosuggest with a react-autowhatever dependency of '~3.1.0' instead of '^3.1.0' the problem went away.

Steps to reproduce:

1. Check out this JSFiddle
2. Type A in the input
3. Scroll to the bottom
4. Move the mouse pointer to the first visible item in the dropdown (it should align to the top of that item)
5. Continuously move the mouse just above the react-autosuggest__suggestions-container and then back on to the first visible item and watch the list continue to scroll until it hits the top.

onChange issue with custom input

Hi,

In case of custom input, when i clicked on a Suggestion, it would trigger a Change event by MouseEvent, onChange is invoked but the event target is not the input, that would cause a problem if there is a custom code in onChange of the input.

`
key: 'maybeCallOnChange',

value: function maybeCallOnChange(event, newValue, method) {

  ...
  ...

  if (newValue !== value) {
    onChange(event, { newValue: newValue, method: method });
  }

}

`

My Bests,
Hung Tran

What's the difference between this and react-autosuggest?

This package has v little doc, can someone explain what the difference is?

Consider to remove aria-haspopup

Hello. Happy to see you're focusing in developing accessible components. Thanks for this 🙂

I'm not sure aria-haspopup is used properly though.

aria-haspopup is a property, not a state. It's meant to indicate if an element has a popup that appears on some user activation, regardless of the popup visibility. In other words, when there's a popup, it should always be true even when the popup is not displayed. Worth nothing with ARIA 1.1 (still a Candidate Recommendation), things will change a bit and there will be more values available.

Additionally, unless I'm missing something, worth considering a combobox shouldn't have an aria-haspopup property at all. Unfortunately, the related section on the ARIA Authoring Practices is under some re-work https://www.w3.org/TR/wai-aria-practices/#combobox and they point to the related GitHub issue: w3c/aria-practices#31

From there, you can refer to the sections that were temporarily removed (https://rawgit.com/w3c/aria-practices/master/aria-practices-DeletedSectionsArchive.html#combobox) and also to the section with general considerations about popups and drop-downs:

5.4 Popups and drop-downs
https://rawgit.com/w3c/aria-practices/master/aria-practices-DeletedSectionsArchive.html#relations_haspopup

where it's clearly stated:

Combo boxes, or drop down lists, work differently. Controls with the role combobox must contain a list of items that can be opened, usually as a drop-down. Because this is intrinsic to the functionality of a combo box, it does not need to be explicitly indicated with aria-haspopup.

renderInputComponent if undefined, should bring back default input

Are you reporting a bug?

renderInputComponent is not optional? when it's undefined it should render the default input component. For now I have to do this

if (custom) {
  return (
    <Autosuggest
      {...props}
      renderInputComponent={() => this.customComponent()}
    />
  )
}

return `<Autosuggest  {...props} renderInputComponent={() => this.customComponent()} />`

I expect it work like below where I can put condition in jsx, but it does not

return <Autosuggest {...props} renderInputComponent={custom ? () => this.customComponent : undefined} />

Above code initially show a blank input when renderInputComponent is optional.

Remove dependency on react-themeable

It's a 10ish lines lib that relies on an outdated version of object-assign (3.0.0 when everyone has moved on to 4.1.0). It looks unmaintained :(

It smells funny on the otherwise clean react-autosuggest dependency tree.

I'd say either inline its code or remove the functionality, it looks like the idea hasn't caught on :(

Please stop using React.PropTypes that is deprecated

Use of React.PropTypes now is deprecated according to: https://facebook.github.io/react/warnings/dont-call-proptypes.html

Thanks

React warning

Thank you for the great library. I'm using it via react-autosuggest.

I've noticed that I get a warning when I have multiple selections suggestions:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Autowhatever`. See https://fb.me/react-warning-keys for more information

It looks like renderItemsList(...) isn't adding a key to the items it returns.

Item container always open

Are you reporting a bug?

No

Are you making a feature request?

No

My issue is demonstrated with this basic example.
(http://codepen.io/moroshko/pen/rraQYx). In this example the items container always has the class 'react-autowhatever__items-container--open' and therefor is always open. I started buiding a component with this example as a template. I tried providing additional properties from 'example 9' and 'react-auto-suggest' to close the container, but couldn't find how it is done. How do u change the behavior of the item container from being always open to open only when it is clicked or focused?

How to use custom scrollbar components with react-autowhatever and keyboard?

renderInputComponent only works with stateless functions, not classes.

Are you reporting a bug?

No.

Currently, the autowhatever does not support using a class for the input component - see here.

Relevant code:

const inputComponent = renderInputComponent({
      type: 'text',
      value: '',
      autoComplete: 'off',
      role: 'combobox',
      'aria-autocomplete': 'list',
      'aria-owns': itemsContainerId,
      'aria-expanded': isOpen,
      'aria-haspopup': isOpen,
      'aria-activedescendant': ariaActivedescendant,
      ...theme(`react-autowhatever-${id}-input`, 'input'),
      ...this.props.inputProps,
      onKeyDown: this.props.inputProps.onKeyDown && this.onKeyDown,
      ref: this.storeInputReference
    });

As you can see, the component is invoked as a pure function. When we tried to use a component that extends from React.Component, this method failed with Uncaught TypeError: Cannot call a class as a function at the function shown above. It would be great to be able to support both types.

• Please create a Codepen that demonstrates your issue. You can start from this example.

http://codepen.io/naomiajacobs/pen/YNZbGb
As you can see, when the input component is a class, the autowhatever breaks.

• Provide the steps to reproduce the issue.
  Pass in a class instead of a pure function to the autowhatever for renderInputComponent. (see codepen above).

Are you making a feature request?

Yes

• Please describe your use case.
  The generalized case is that we want to be able to use React lifecyle hooks in our input component.

The specific case is that we're making our input fancy with icons and stuff, and need to add click behavior to the icons so that when you click on them, the input focuses even though you didn't actually click on the input.

• If you have ideas how to extend the Autowhatever API to support your new feature, please share!

Inside of the autowhatever, it could check to see if the inputComponent is a class or a function, and initialize it accordingly.

Consider to use aria-selected on the highlighed option

Ideally, the highlighted option in the list of suggestions should have an aria-selected state set to true. Quoting from the Listbox section of the ARIA Authoring Practices:

In a single-select listbox, the selected option has aria-selected set to true.

Apart from semantics, there's also a concrete side-effect: to my knowledge, Safari 10 + VoiceOver don't announce the highlighted option if aria-selected is not present.