Possibility to set 'id' attribute

[smelamud]

It is not possible currently to set the id attribute of Combobox, NumberPicker etc. Because of that, it is not possible to link a <label> to them using htmlFor attribute.

[jquense]

Why is it not possible? It should be possible, are you staying that passing an I'd doesn't end up anywhere?

[smelamud]

Exactly.

[JohnAlbin]

This is a critical accessibility bug. If we set a id value on a widget, we expect that value to be used in an id attribute in its outputted HTML.

Setting the id of a DropdownList to myID produces the following initial HTML:

<div
  role="combobox"
  id="myID_input"
  aria-owns="myID_listbox"
  aria-controls="myID_listbox"
  aria-expanded="false"
  aria-haspopup="listbox"
  aria-busy="false"
  aria-autocomplete="list" 
  aria-disabled="false" 
  aria-readonly="false" 
  tabindex="-1" 
  data-intent="mouse" 
  class="rw-dropdown-list rw-widget"
>
  <div tabindex="-1" class="rw-widget-input rw-widget-picker rw-widget-container">
    <div class="rw-dropdown-list-input">
      <input name="myName" tabindex="-1" aria-hidden="true" class="rw-detect-autofill rw-sr" value="">
      <input class="rw-dropdownlist-search" autocomplete="off" size="2" value="">
      <span class="rw-dropdown-list-value"></span>
    </div>
    <span aria-hidden="true" class="rw-btn rw-picker-caret"></span>
  </div>
</div>

As you can see it uses a id="myID_input" on the wrapping div. And it uses id="myID_listbox" on the dropdown (once it appears), but no HTML element uses id="myID".

[JohnAlbin]

If you look at how labels behave on built-in HTML inputs, you'll see that clicking on the label will shift the user focus to the input element. For example, clicking a checkbox's label will check the checkbox and make it focused and clicking a text input's label will make the text input focused.

That means the proper fix for the DropdownList is for the <input class="rw-dropdownlist-search" autocomplete="off" size="2" value=""> element to get the DropdownList's id attribute.

[nbkhope]

I tried setting id of the underlying input to associate it with a label, using the following, but it didn't work:

<label htmlFor="my-id">My Label</label>
<DropdownList
  inputProps: {{ id:"my-id" }}
/>

Investigation

The key-value pairs are copied from the object at:

react-widgets/packages/react-widgets/src/DropdownList.tsx

Line 559 in 2ee7dc0

{...inputProps}

However due to destructuring of specific keys, it just ignores attributes such as id property:

react-widgets/packages/react-widgets/src/DropdownListInput.tsx

Lines 31 to 49 in 2ee7dc0

	const DropdownListInput = React.forwardRef(function <TDataItem>(
	{
	name,
	autoComplete,
	value,
	allowSearch,
	placeholder,
	textAccessor,
	dataKeyAccessor,
	searchTerm,
	onSearch,
	onAutofill,
	onAutofillChange,
	renderValue,
	disabled,
	readOnly,
	}: Props<TDataItem>,
	ref: React.Ref<DropdownInputHandle>,
	) {

react-widgets/packages/react-widgets/src/DropdownListInput.tsx

Lines 101 to 112 in 2ee7dc0

	<input
	name={name}
	tabIndex={-1}
	disabled={disabled}
	readOnly={readOnly}
	value={strValue == null ? '' : strValue}
	autoComplete={autoComplete}
	onChange={handleAutofill}
	onAnimationStart={handleAutofillDetect}
	aria-hidden={!autofilling}
	className={cn('rw-detect-autofill', !autofilling && 'rw-sr')}
	/>