Skip to content

BUG: Select Component keyboard controls error handled #138

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

Merged
Raalzz merged 9 commits into from
Oct 20, 2022
Merged

BUG: Select Component keyboard controls error handled #138

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c6595a6
changed the value type
saurabhsutar192 Oct 12, 2022
658c632
minor bug fix
saurabhsutar192 Oct 12, 2022
8d59e30
code smell removed
saurabhsutar192 Oct 12, 2022
b12030f
Merge branch 'main' of https://github.com/antstackio/hover-design int…
saurabhsutar192 Oct 20, 2022
6705b8a
options not re rendering fix
saurabhsutar192 Oct 20, 2022
0f4ccfe
handled options when undefined
saurabhsutar192 Oct 20, 2022
bd5e41b
minor changes
saurabhsutar192 Oct 20, 2022
52d1d94
keyboard controls error on undefined fix
saurabhsutar192 Oct 20, 2022
664c7e8
keyboard control bug fix
saurabhsutar192 Oct 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 57 additions & 44 deletions lib/src/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,26 +77,28 @@ const SelectComponent: ForwardRefRenderFunction<

useEffect(() => {
if (isMulti) {
Array.isArray(selectValue) &&
setInternalOptions(
options.filter(
(option) => !selectValue.find((data) => data.value === option.value)
Array.isArray(selectValue)
? setInternalOptions(
options?.filter(
(option) =>
!selectValue.find((data) => data.value === option.value)
)
)
);
: setInternalOptions(options);
} else {
setInternalOptions(options);
selectValue
? !Array.isArray(selectValue) && setSearchText(selectValue?.label)
: setSearchText("");
}
}, [selectValue, isMulti]);
}, [selectValue, isMulti, options]);

useEffect(() => {
focusElement(cursor);
}, [cursor]);

useEffect(() => {
if (internalOptions.length !== 0) {
if (Array.isArray(internalOptions)) {
let skipCount = cursor;
while (internalOptions[skipCount]?.disabled) {
skipCount++;
Expand Down Expand Up @@ -181,13 +183,13 @@ const SelectComponent: ForwardRefRenderFunction<
const text = event.target.value;
const mainOptions =
isMulti && Array.isArray(selectValue)
? options.filter(
? options?.filter(
(option) => !selectValue.find((data) => data.value === option.value)
)
: options;
setIsDropped(true);
setSearchText(text);
const filteredOptions = mainOptions.filter((option) => {
const filteredOptions = mainOptions?.filter((option) => {
return option.label
.trim()
.toLowerCase()
Expand Down Expand Up @@ -233,6 +235,7 @@ const SelectComponent: ForwardRefRenderFunction<
const checkIfAllValuesSelected = () => {
return (
Array.isArray(selectValue) &&
Array.isArray(options) &&
selectValue.length === options.length &&
options.every((el) => selectValue.find((data) => data.value === el.value))
);
Expand Down Expand Up @@ -285,10 +288,11 @@ const SelectComponent: ForwardRefRenderFunction<
if (isDropped) {
optionsList?.map((option) => {
if (option.getAttribute("data-hover") === "true") {
const optionValue = internalOptions.find(
(arr) => arr.value === option.getAttribute("data-value")
const optionValue = internalOptions?.find(
(arr) =>
JSON.stringify(arr.value) === option.getAttribute("data-value")
) as OptionsType;
!optionValue.disabled && internalClickHandler(optionValue, event);
!optionValue?.disabled && internalClickHandler(optionValue, event);
}
});
} else if (!isDropped) {
Expand All @@ -298,51 +302,60 @@ const SelectComponent: ForwardRefRenderFunction<
};

const focusNextOption = () => {
let skipStep = 1;
while (
if (Array.isArray(internalOptions)) {
let skipStep = 1;
while (
cursor + skipStep < internalOptions.length &&
internalOptions[cursor + skipStep].disabled
) {
skipStep++;
}
cursor + skipStep < internalOptions.length &&
internalOptions[cursor + skipStep].disabled
) {
skipStep++;
setCursor(cursor + skipStep);
}
cursor + skipStep < internalOptions.length && setCursor(cursor + skipStep);
};

const focusPrevOption = () => {
let skipStep = 1;
while (
cursor - skipStep >= 0 &&
internalOptions[cursor - skipStep].disabled
) {
skipStep++;
if (Array.isArray(internalOptions)) {
let skipStep = 1;
while (
cursor - skipStep >= 0 &&
internalOptions[cursor - skipStep].disabled
) {
skipStep++;
}
cursor - skipStep >= 0 && setCursor(cursor - skipStep);
}
cursor - skipStep >= 0 && setCursor(cursor - skipStep);
};

const focusFirstOption = () => {
let skipStep = 0;
while (
skipStep < internalOptions.length &&
internalOptions[skipStep].disabled
) {
skipStep++;
}
if (skipStep < internalOptions.length) {
setCursor(skipStep);
focusElement(skipStep);
if (Array.isArray(internalOptions)) {
let skipStep = 0;
while (
skipStep < internalOptions.length &&
internalOptions[skipStep].disabled
) {
skipStep++;
}
if (skipStep < internalOptions.length) {
setCursor(skipStep);
focusElement(skipStep);
}
}
};

const focusLastOption = () => {
let skipStep = 1;
while (
if (Array.isArray(internalOptions)) {
let skipStep = 1;
while (
internalOptions.length - skipStep >= 0 &&
internalOptions[internalOptions.length - skipStep].disabled
) {
skipStep++;
}
internalOptions.length - skipStep >= 0 &&
internalOptions[internalOptions.length - skipStep].disabled
) {
skipStep++;
setCursor(internalOptions.length - skipStep);
}
internalOptions.length - skipStep >= 0 &&
setCursor(internalOptions.length - skipStep);
};

const inputKeyDownHandler = (event: KeyboardEvent<HTMLInputElement>) => {
Expand Down Expand Up @@ -416,7 +429,7 @@ const SelectComponent: ForwardRefRenderFunction<
alignItems="center"
>
{isMulti &&
(Array.isArray(selectValue) && selectValue.length !== 0
(Array.isArray(selectValue)
? selectValue?.map((arr, ind) => {
return (
<Pill
Expand Down Expand Up @@ -470,7 +483,7 @@ const SelectComponent: ForwardRefRenderFunction<
className={`${selectListContainerStyle}`}
role={"listbox"}
>
{internalOptions.length !== 0 ? (
{Array.isArray(internalOptions) && internalOptions?.length !== 0 ? (
internalOptions.map((option, ind) => {
const selectListClass = selectListRecipe({
disabled: option.disabled,
Expand Down