How to obtain currently focused item?

[NullPainter2]

Hello,

I need to find value (or ID or index) of currently focused item and use it inside of a custom Input.

Can't use Select.onChange because it is not fired when focused item changes.

I could hack around it by sampling Option.isFocused and pray it would not cause any problem, but I wonder if there is a better way.

EDIT: Reason why I am doing this is to create localized a11y message which informs about currently chosen option.

Thanks for help :)

[ebonow]

Greetings @NullPainter2 ,

v4.2 released an API for custom ariaLiveMessages. There is not great/any documentation for this but this might be helpful for you.

https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/accessibility/index.js

ariaLiveMessages is a new prop that you can use to pass in an object that can be used to create customized a11y messages to be read back by the aria-live. One of those is onFocus

export type AriaOnFocusProps = {
  // String indicating whether the option was focused in the menu or as (multi-) value
  context: OptionContextType,
  // Option that is being focused
  focused: OptionType,
  // Boolean indicating whether focused menu option has been disabled
  isDisabled?: boolean,
  // Boolean indicating whether focused menu option is an already selcted option
  isSelected?: boolean,
  // String derived label from focused option/value
  label?: string,
  // Options provided as props to Select used to determine indexing
  options?: OptionsType,
  // selected option(s) of the Select
  selectValue?: ValueType,
};

so you could do the following:

const onFocus = focused => `Option ${focused.label} is focused`;

const ariaLiveMessages = { onFocus }

return <Select ariaLiveMessages={ariaLiveMessages} {...otherProps} />