Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: ListBox keyboard navigation like primevue #6570

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Fix: ListBox keyboard navigation like primevue #6570

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
239f17b
feat: flatOptions method
KirilCycle May 3, 2024
597d70d
feat: flat group options at 'getVisibleOptions'
KirilCycle May 5, 2024
897889d
fix: group header creation
KirilCycle May 5, 2024
a038756
feat: remvoe unusde code
KirilCycle May 5, 2024
e7f0ff5
feat: remvoe unusde code
KirilCycle May 5, 2024
daed47f
fix: place options closer to where they are used
KirilCycle May 5, 2024
4f370ed
fix: additional condition to render groupheader
KirilCycle May 6, 2024
99f41b4
formatting
KirilCycle May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
64 changes: 21 additions & 43 deletions components/lib/listbox/ListBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -650,7 +650,21 @@ export const ListBox = React.memo(
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
};

const flatOptions = (options) => {
return (options || []).reduce((result, option, index) => {
result.push({ optionGroup: option, group: true, index, code: option.code, label: option.label });

const optionGroupChildren = getOptionGroupChildren(option);

optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));

return result;
}, []);
};

const getVisibleOptions = () => {
const options = props.optionGroupLabel ? flatOptions(props.options) : props.options;

if (hasFilter) {
const filterValue = filteredValue.trim().toLocaleLowerCase(props.filterLocale);
const searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
Expand All @@ -666,13 +680,13 @@ export const ListBox = React.memo(
}
}

return filteredGroups;
return flatOptions(filteredGroups);
}

return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
return FilterService.filter(options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
}

return props.options;
return options;
};

const scrollToSelectedIndex = () => {
Expand Down Expand Up @@ -715,47 +729,12 @@ export const ListBox = React.memo(
) : null;
};

const createGroupChildren = (optionGroup, style) => {
const groupChildren = getOptionGroupChildren(optionGroup);

return groupChildren.map((option, j) => {
const optionLabel = getOptionLabel(option);
const optionKey = j + '_' + getOptionRenderKey(option);
const disabled = isOptionDisabled(option);

return (
<ListBoxItem
id={id.current + '_' + j}
hostName="ListBox"
optionKey={optionKey}
key={optionKey}
label={optionLabel}
option={option}
style={style}
template={props.itemTemplate}
selected={isSelected(option)}
onOptionMouseDown={onOptionMouseDown}
onOptionMouseMove={onOptionMouseMove}
onClick={onOptionSelect}
index={j}
focusedOptionIndex={focusedOptionIndex}
onTouchEnd={onOptionTouchEnd}
disabled={disabled}
ptCallbacks={ptCallbacks}
metaData={metaData}
/>
);
});
};

const createItem = (option, index, scrollerOptions = {}) => {
const style = { height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined };

if (props.optionGroupLabel) {
if (option.group && option.optionGroup && props.optionGroupLabel) {
const groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : getOptionGroupLabel(option);
const groupChildrenContent = createGroupChildren(option, style);
const key = index + '_' + getOptionGroupRenderKey(option);

const itemGroupProps = mergeProps(
{
className: ptCallbacks.cx('itemGroup'),
Expand All @@ -766,10 +745,9 @@ export const ListBox = React.memo(
);

return (
<React.Fragment key={key}>
<li {...itemGroupProps}>{groupContent}</li>
{groupChildrenContent}
</React.Fragment>
<li key={key} {...itemGroupProps}>
{groupContent}
</li>
);
}

Expand Down