Console error on Listbox validation

[michielpauw]

Console error on Listbox validation

[tlouisse]

Hey, thanks for pointing this out. There seems to be a small bug in the current implementation indeed.

In the end it comes down to whether the formElement (be it an input/field or an option) is focusable or not. For a listbox(but also for select-rich and combobox that use listbox under the hood), individual options are not focusable, only their "host" (the listbox component, that contains a tabindex) is. This is because listboxes are not implemented with roving tabindexes, but via aria-activedescendant.

Bottom line: LionOption is not designed to receive focus, and therefore it has no _focusableNode and that explains the undefined error above.

We should be able to solve it like this:

- if (firstFormElWithError.formElements?.length > 0) {
+ if (hasFocusableChildren(firstFormElWithError)) {

function hasFocusableChildren(formEl) {
  // this implies all children have the same type (either all of them are focusable or none of them are)
  return formEl.formElements?.some(child => child._focusableNode);
}