diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js index 0f2c750722..ba20a2f512 100644 --- a/components/lib/listbox/ListBox.js +++ b/components/lib/listbox/ListBox.js @@ -22,7 +22,7 @@ export const ListBox = React.memo( const [filterValueState, setFilterValueState] = React.useState(''); const elementRef = React.useRef(null); const virtualScrollerRef = React.useRef(null); - const id = React.useRef(UniqueComponentId()); + const id = React.useRef(null); const listRef = React.useRef(null); const optionTouched = React.useRef(false); const filteredValue = (props.onFilterValueChange ? props.filterValue : filterValueState) || ''; @@ -261,7 +261,7 @@ export const ListBox = React.memo( setFocusedOptionIndex(index); scrollInView(); - if (props.selectOnFocus && !props.multiple) { + if (event && props.selectOnFocus && !props.multiple) { onOptionSelect(event, visibleOptions[index]); } } @@ -391,7 +391,7 @@ export const ListBox = React.memo( break; case 'Tab': - //NOOP + // NOOP break; case 'ShiftLeft': @@ -544,6 +544,7 @@ export const ListBox = React.memo( lastHiddenFocusableElement.current.tabIndex = DomHandler.isElement(firstFocusableEl) ? undefined : -1; firstHiddenFocusableElement.current.tabIndex = -1; + changeFocusedOptionIndex(null, 0); }; const onLastHiddenFocus = (event) => { @@ -617,6 +618,7 @@ export const ListBox = React.memo( useMountEffect(() => { scrollToSelectedIndex(); + id.current = UniqueComponentId(); }); const createHeader = () => { @@ -644,12 +646,12 @@ export const ListBox = React.memo( const optionLabel = getOptionLabel(option); const optionKey = j + '_' + getOptionRenderKey(option); const disabled = isOptionDisabled(option); - const tabIndex = disabled ? null : props.tabIndex || 0; return ( { const listProps = mergeProps( { - ref: options.contentRef, + ref: listRef, style: ptCallbacks.sx('list', { options }), className: ptCallbacks.cx('list', { options }), role: 'listbox', @@ -842,7 +844,7 @@ export const ListBox = React.memo( 'data-p-hidden-accessible': true, 'data-p-hidden-focusable': true }, - ptCallbacks.ptm('hiddenFirstFocusableEl') + ptCallbacks.ptm('hiddenLastFocusableEl') ); return ( diff --git a/components/lib/listbox/ListBoxItem.js b/components/lib/listbox/ListBoxItem.js index db5f7e8a0c..2165d21b48 100644 --- a/components/lib/listbox/ListBoxItem.js +++ b/components/lib/listbox/ListBoxItem.js @@ -53,7 +53,6 @@ export const ListBoxItem = React.memo((props) => { }; const content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label; - const itemProps = mergeProps( { id: props.id, @@ -65,7 +64,7 @@ export const ListBoxItem = React.memo((props) => { onBlur: onBlur, tabIndex: '-1', 'aria-label': props.label, - key: props.label, + key: props.optionKey, role: 'option', 'aria-selected': props.selected, 'aria-disabled': props.disabled,