From b97acaf554d66e9d371eac2ddcd662d1d297aef0 Mon Sep 17 00:00:00 2001 From: Wilker Date: Wed, 23 Aug 2023 13:19:59 +0800 Subject: [PATCH 01/10] [BOOKINGSG-4616] enhancement inderminate checked box --- src/shared/nested-dropdown-list/list-item.tsx | 4 +- .../nested-dropdown-list-helper.ts | 142 +++++++++++++----- .../nested-dropdown-list.tsx | 29 +++- src/shared/nested-dropdown-list/types.ts | 2 + 4 files changed, 135 insertions(+), 42 deletions(-) diff --git a/src/shared/nested-dropdown-list/list-item.tsx b/src/shared/nested-dropdown-list/list-item.tsx index fd967da4e..f5a7097bf 100644 --- a/src/shared/nested-dropdown-list/list-item.tsx +++ b/src/shared/nested-dropdown-list/list-item.tsx @@ -179,6 +179,7 @@ export const ListItem = ({ displaySize="small" $type="category" checked={item.checked} + indeterminate={item.indeterminate} onChange={handleSelectParent} /> )} @@ -224,6 +225,7 @@ export const ListItem = ({ )} @@ -248,7 +250,7 @@ export const ListItem = ({ ref={(ref) => onRef(ref, item.keyPath)} type="button" tabIndex={visible ? 0 : -1} - $selected={checkListItemSelected(item.keyPath)} + $selected={item.selected} $multiSelect={multiSelect} onBlur={handleBlur} onClick={handleSelect} diff --git a/src/shared/nested-dropdown-list/nested-dropdown-list-helper.ts b/src/shared/nested-dropdown-list/nested-dropdown-list-helper.ts index f9fe10060..e092492c0 100644 --- a/src/shared/nested-dropdown-list/nested-dropdown-list-helper.ts +++ b/src/shared/nested-dropdown-list/nested-dropdown-list-helper.ts @@ -43,7 +43,9 @@ export namespace NestedDropdownListHelper { value, expanded: mode === "expand", isSearchTerm: false, + selected: false, checked: false, + indeterminate: undefined, keyPath, subItems: subItems ? formatted(subItems, keyPath) @@ -79,9 +81,17 @@ export namespace NestedDropdownListHelper { keyPath.forEach((key) => { targetKey.push(key); const item = getItemAtKeyPath(draft, targetKey); - if (item.subItems) { - item.expanded = true; - } + + const selected = + JSON.stringify(item.keyPath) === + JSON.stringify( + selectedKeyPaths[0]?.slice( + 0, + item.keyPath.length + ) + ); + if (item.subItems) item.expanded = true; + if (selected) item.selected = true; }); }); } @@ -176,43 +186,105 @@ export namespace NestedDropdownListHelper { return item; }; - export const updateCategoryChecked = ( - list: FormattedOptionMap, + export const getCategoryChecked = ( + targetList: FormattedOptionMap, selectedKeyPaths: string[][] ) => { - const resetList = produce( - list, - (draft: Map>) => { - const resetChecked = ( - items: Map> - ) => { - if (!items || !items.size) return; - for (const item of items.values()) { - item.checked = false; - if (item.subItems) resetChecked(item.subItems); - } - }; - resetChecked(draft); + const update = (item: CombinedFormattedOptionProps) => { + const matched = selectedKeyPaths.some( + (key) => JSON.stringify(key) === JSON.stringify(item.keyPath) + ); + + if (!item.subItems) { + if (matched) { + return { + ...item, + checked: true, + }; + } else { + return { + ...item, + checked: false, + }; + } } - ); - return produce(resetList, (draft: FormattedOptionMap) => { - let targetKey: string[] = []; - selectedKeyPaths.forEach((keyPathArr) => { - targetKey = []; - const relevantKeys = keyPathArr.slice(0, -1); - relevantKeys.forEach((key) => { - targetKey.push(key); - const item = NestedDropdownListHelper.getItemAtKeyPath( - draft, - targetKey - ); - if (item) { - item.checked = true; - } - }); + const subItems: Map< + string, + CombinedFormattedOptionProps + > = new Map(); + + item.subItems.forEach((subItem) => { + const result = update(subItem) as CombinedFormattedOptionProps< + V1, + V2, + V3 + >; + if (result) { + const key = result.keyPath[result.keyPath.length - 1]; + + subItems.set(key, result); + } }); - }); + + const checkedStatus = Array.from(subItems).map( + (item) => item[1].checked + ); + const isAllChecked = checkedStatus.every(Boolean); + + const someChecked = + checkedStatus.filter((status) => status === false).length !== + checkedStatus.length; + + const result = { + ...item, + checked: isAllChecked, + indeterminate: isAllChecked + ? undefined + : someChecked + ? true + : undefined, + subItems, + }; + + return result; + }; + + const list = new Map(); + + for (const [key, item] of targetList) { + const result = update(item); + + if (result && result.subItems && result.subItems.size) { + const indeterminateStatus = Array.from(result.subItems).map( + (item) => item[1].indeterminate + ); + const checkedStatus = Array.from(result.subItems).map( + (item) => item[1].checked + ); + + const isAllIndeterminate = indeterminateStatus.every(Boolean); + const isAllChecked = checkedStatus.every(Boolean); + const someInderminate = + indeterminateStatus.filter(Boolean).length; + const someChecked = checkedStatus.filter(Boolean).length; + + const indeterminate = + isAllChecked || isAllIndeterminate + ? undefined + : someChecked || someInderminate + ? true + : undefined; + + list.set(key, { + ...result, + indeterminate, + checked: isAllChecked, + }); + } + } + + return list; }; } diff --git a/src/shared/nested-dropdown-list/nested-dropdown-list.tsx b/src/shared/nested-dropdown-list/nested-dropdown-list.tsx index fb18a56bf..4d715d2ff 100644 --- a/src/shared/nested-dropdown-list/nested-dropdown-list.tsx +++ b/src/shared/nested-dropdown-list/nested-dropdown-list.tsx @@ -91,9 +91,6 @@ export const NestedDropdownList = ({ const list = getInitialDropdown(); const keyPaths = NestedDropdownListHelper.getVisibleKeyPaths(list); - setCurrentItems(list); - setVisibleKeyPaths(keyPaths); - if (searchInputRef.current) { searchInputRef.current.focus(); } else if (listItemRefs.current) { @@ -103,14 +100,17 @@ export const NestedDropdownList = ({ if (multiSelect) { const multiSelectList = - NestedDropdownListHelper.updateCategoryChecked( + NestedDropdownListHelper.getCategoryChecked( list, selectedKeyPaths ); setCurrentItems(multiSelectList); + } else { + setCurrentItems(list); } + setVisibleKeyPaths(keyPaths); // Give some time for the custom call-to-action to be rendered setTimeout(() => { setContentHeight(getContentHeight()); @@ -139,7 +139,7 @@ export const NestedDropdownList = ({ useEffect(() => { if (visible && multiSelect) { const targetList = isSearch ? filteredItems : currentItems; - const list = NestedDropdownListHelper.updateCategoryChecked( + const list = NestedDropdownListHelper.getCategoryChecked( targetList, selectedKeyPaths ); @@ -156,6 +156,7 @@ export const NestedDropdownList = ({ const handleSelect = (item: CombinedFormattedOptionProps) => { const { label, keyPath, value } = item; + updateSelectedState(keyPath); onSelectItem({ label, keyPath, value }); }; @@ -325,6 +326,22 @@ export const NestedDropdownList = ({ return listHeight; }; + const updateSelectedState = (keyPath: string[]) => { + const targetList = isSearch ? filteredItems : currentItems; + const list = produce( + targetList, + (draft: FormattedOptionMap) => { + const item = NestedDropdownListHelper.getItemAtKeyPath( + draft, + keyPath + ); + item.selected = true; + } + ); + + isSearch ? setFilteredItems(list) : setCurrentItems(list); + }; + const updateSearchState = (): FormattedOptionMap => { const search = ( item: CombinedFormattedOptionProps, @@ -437,7 +454,7 @@ export const NestedDropdownList = ({ if (multiSelect) { const multiSelectList = - NestedDropdownListHelper.updateCategoryChecked( + NestedDropdownListHelper.getCategoryChecked( filtered, selectedKeyPaths ); diff --git a/src/shared/nested-dropdown-list/types.ts b/src/shared/nested-dropdown-list/types.ts index 6226f7428..a3cf39271 100644 --- a/src/shared/nested-dropdown-list/types.ts +++ b/src/shared/nested-dropdown-list/types.ts @@ -68,7 +68,9 @@ interface BaseFormattedOptionProps { label: string; keyPath: string[]; expanded: boolean; + selected: boolean; checked: boolean; + indeterminate: boolean; isSearchTerm: boolean; } From e8b0148e4cb953fb6c5998026fa18ac2b3b19104 Mon Sep 17 00:00:00 2001 From: Wilker Date: Wed, 23 Aug 2023 13:27:18 +0800 Subject: [PATCH 02/10] [BOOKINGSG-4616] remove unnecessary props in list item --- src/shared/nested-dropdown-list/list-item.tsx | 11 +---------- .../nested-dropdown-list/nested-dropdown-list.tsx | 1 - 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/src/shared/nested-dropdown-list/list-item.tsx b/src/shared/nested-dropdown-list/list-item.tsx index f5a7097bf..d4560be01 100644 --- a/src/shared/nested-dropdown-list/list-item.tsx +++ b/src/shared/nested-dropdown-list/list-item.tsx @@ -20,7 +20,6 @@ import { interface ListItemProps { item: CombinedFormattedOptionProps; - selectedKeyPaths: string[][]; selectableCategory?: boolean | undefined; searchValue: string | undefined; itemTruncationType?: TruncateType | undefined; @@ -35,7 +34,6 @@ interface ListItemProps { export const ListItem = ({ item, - selectedKeyPaths, selectableCategory, searchValue, itemTruncationType, @@ -79,11 +77,6 @@ export const ListItem = ({ // ============================================================================= // HELPER FUNCTIONS // ============================================================================= - const checkListItemSelected = (keyPath: string[]): boolean => - selectedKeyPaths.some( - (key) => JSON.stringify(key) === JSON.stringify(keyPath) - ); - const hasExceededContainer = ( item: CombinedFormattedOptionProps ) => { @@ -146,7 +139,6 @@ export const ListItem = ({ ({ {multiSelect && ( )} diff --git a/src/shared/nested-dropdown-list/nested-dropdown-list.tsx b/src/shared/nested-dropdown-list/nested-dropdown-list.tsx index 4d715d2ff..0a215fd25 100644 --- a/src/shared/nested-dropdown-list/nested-dropdown-list.tsx +++ b/src/shared/nested-dropdown-list/nested-dropdown-list.tsx @@ -475,7 +475,6 @@ export const NestedDropdownList = ({ Date: Wed, 23 Aug 2023 14:07:14 +0800 Subject: [PATCH 03/10] [BOOKINGSG-4616][WK] update stories --- src/input-nested-multi-select/types.ts | 1 + .../form/form-nested-multi-select/props-table.tsx | 13 ------------- 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/src/input-nested-multi-select/types.ts b/src/input-nested-multi-select/types.ts index df1c787a4..e5b2300cc 100644 --- a/src/input-nested-multi-select/types.ts +++ b/src/input-nested-multi-select/types.ts @@ -21,6 +21,7 @@ export interface InputNestedMultiSelectProps DropdownStyleProps { /** Specifies key path to select particular option label */ selectedKeyPaths?: string[][] | undefined; + /** Called when option label is selected */ onSelectOptions?: | ((keyPaths: string[][], values: Array) => void) | undefined; diff --git a/stories/form/form-nested-multi-select/props-table.tsx b/stories/form/form-nested-multi-select/props-table.tsx index dcb4ced0c..153356b65 100644 --- a/stories/form/form-nested-multi-select/props-table.tsx +++ b/stories/form/form-nested-multi-select/props-table.tsx @@ -69,12 +69,6 @@ const DATA: ApiTableSectionProps[] = [ "The function to convert a value to a string. Only single callback used for both selects. Assumption: values are homogenous for both selects.", propTypes: ["(value: V1 | V2 | V3) => string"], }, - { - name: "selectableCategory", - description: "When specified, allows selection of categories", - propTypes: ["boolean"], - defaultValue: `"false"`, - }, { name: "optionsLoadState", description: @@ -82,13 +76,6 @@ const DATA: ApiTableSectionProps[] = [ propTypes: [`"success"`, `"loading"`, `"failed"`], defaultValue: `"success"`, }, - { - name: "optionTruncationType", - description: - "Specifies the trunction type of the options display. Truncated text will be replaced with ellipsis", - propTypes: [`"end"`, `"middle"`], - defaultValue: `"end"`, - }, { name: "hideNoResultsDisplay", description: From 50198367ed7b0927afb34995e56fef032b1f43c5 Mon Sep 17 00:00:00 2001 From: Wilker Date: Thu, 24 Aug 2023 07:49:29 +0800 Subject: [PATCH 04/10] [BOOKINGSG-4616][WK] recursively update state value --- .../nested-dropdown-list-helper.ts | 176 ++++++++---------- .../nested-dropdown-list.tsx | 24 +-- 2 files changed, 78 insertions(+), 122 deletions(-) diff --git a/src/shared/nested-dropdown-list/nested-dropdown-list-helper.ts b/src/shared/nested-dropdown-list/nested-dropdown-list-helper.ts index e092492c0..92b1b7518 100644 --- a/src/shared/nested-dropdown-list/nested-dropdown-list-helper.ts +++ b/src/shared/nested-dropdown-list/nested-dropdown-list-helper.ts @@ -45,7 +45,7 @@ export namespace NestedDropdownListHelper { isSearchTerm: false, selected: false, checked: false, - indeterminate: undefined, + indeterminate: false, keyPath, subItems: subItems ? formatted(subItems, keyPath) @@ -167,6 +167,79 @@ export namespace NestedDropdownListHelper { return keyPaths; }; + export const getUpdateCheckbox = ( + list: FormattedOptionMap, + selectedKeyPaths: string[][] + ) => { + const result = produce( + list, + (draft: FormattedOptionMap) => { + const update = ( + items: Map> + ) => { + for (const item of items.values()) { + if (!item.subItems) { + const checked = selectedKeyPaths.some( + (keyPath) => + JSON.stringify(keyPath) === + JSON.stringify(item.keyPath) + ); + item.checked = checked; + } else { + update(item.subItems); + + const subItems: Map< + string, + CombinedFormattedOptionProps + > = item.subItems; + + const { checked, indeterminate } = Array.from( + subItems + ).reduce( + (result, subItemMap) => { + const item = subItemMap[1]; + result.checked.push(item.checked); + result.indeterminate.push( + item.indeterminate + ); + + return result; + }, + { + checked: [], + indeterminate: [], + } + ); + + const isAllChecked = checked.every(Boolean); + const isPartialChecked = checked.some(Boolean); + const isPartialIndeterminate = + indeterminate.some(Boolean); + + if (isAllChecked) { + item.checked = true; + item.indeterminate = false; + } else if ( + isPartialChecked || + isPartialIndeterminate + ) { + item.indeterminate = true; + item.checked = false; + } else { + item.indeterminate = false; + item.checked = false; + } + } + } + }; + + update(draft); + } + ); + + return result; + }; + export const getItemAtKeyPath = ( draft: FormattedOptionMap, keyPath: string[] @@ -185,107 +258,6 @@ export namespace NestedDropdownListHelper { return item; }; - - export const getCategoryChecked = ( - targetList: FormattedOptionMap, - selectedKeyPaths: string[][] - ) => { - const update = (item: CombinedFormattedOptionProps) => { - const matched = selectedKeyPaths.some( - (key) => JSON.stringify(key) === JSON.stringify(item.keyPath) - ); - - if (!item.subItems) { - if (matched) { - return { - ...item, - checked: true, - }; - } else { - return { - ...item, - checked: false, - }; - } - } - - const subItems: Map< - string, - CombinedFormattedOptionProps - > = new Map(); - - item.subItems.forEach((subItem) => { - const result = update(subItem) as CombinedFormattedOptionProps< - V1, - V2, - V3 - >; - if (result) { - const key = result.keyPath[result.keyPath.length - 1]; - - subItems.set(key, result); - } - }); - - const checkedStatus = Array.from(subItems).map( - (item) => item[1].checked - ); - const isAllChecked = checkedStatus.every(Boolean); - - const someChecked = - checkedStatus.filter((status) => status === false).length !== - checkedStatus.length; - - const result = { - ...item, - checked: isAllChecked, - indeterminate: isAllChecked - ? undefined - : someChecked - ? true - : undefined, - subItems, - }; - - return result; - }; - - const list = new Map(); - - for (const [key, item] of targetList) { - const result = update(item); - - if (result && result.subItems && result.subItems.size) { - const indeterminateStatus = Array.from(result.subItems).map( - (item) => item[1].indeterminate - ); - const checkedStatus = Array.from(result.subItems).map( - (item) => item[1].checked - ); - - const isAllIndeterminate = indeterminateStatus.every(Boolean); - const isAllChecked = checkedStatus.every(Boolean); - const someInderminate = - indeterminateStatus.filter(Boolean).length; - const someChecked = checkedStatus.filter(Boolean).length; - - const indeterminate = - isAllChecked || isAllIndeterminate - ? undefined - : someChecked || someInderminate - ? true - : undefined; - - list.set(key, { - ...result, - indeterminate, - checked: isAllChecked, - }); - } - } - - return list; - }; } // ============================================================================= diff --git a/src/shared/nested-dropdown-list/nested-dropdown-list.tsx b/src/shared/nested-dropdown-list/nested-dropdown-list.tsx index 0a215fd25..223ff5440 100644 --- a/src/shared/nested-dropdown-list/nested-dropdown-list.tsx +++ b/src/shared/nested-dropdown-list/nested-dropdown-list.tsx @@ -100,7 +100,7 @@ export const NestedDropdownList = ({ if (multiSelect) { const multiSelectList = - NestedDropdownListHelper.getCategoryChecked( + NestedDropdownListHelper.getUpdateCheckbox( list, selectedKeyPaths ); @@ -139,7 +139,8 @@ export const NestedDropdownList = ({ useEffect(() => { if (visible && multiSelect) { const targetList = isSearch ? filteredItems : currentItems; - const list = NestedDropdownListHelper.getCategoryChecked( + + const list = NestedDropdownListHelper.getUpdateCheckbox( targetList, selectedKeyPaths ); @@ -156,7 +157,6 @@ export const NestedDropdownList = ({ const handleSelect = (item: CombinedFormattedOptionProps) => { const { label, keyPath, value } = item; - updateSelectedState(keyPath); onSelectItem({ label, keyPath, value }); }; @@ -326,22 +326,6 @@ export const NestedDropdownList = ({ return listHeight; }; - const updateSelectedState = (keyPath: string[]) => { - const targetList = isSearch ? filteredItems : currentItems; - const list = produce( - targetList, - (draft: FormattedOptionMap) => { - const item = NestedDropdownListHelper.getItemAtKeyPath( - draft, - keyPath - ); - item.selected = true; - } - ); - - isSearch ? setFilteredItems(list) : setCurrentItems(list); - }; - const updateSearchState = (): FormattedOptionMap => { const search = ( item: CombinedFormattedOptionProps, @@ -454,7 +438,7 @@ export const NestedDropdownList = ({ if (multiSelect) { const multiSelectList = - NestedDropdownListHelper.getCategoryChecked( + NestedDropdownListHelper.getUpdateCheckbox( filtered, selectedKeyPaths ); From 759b9d0c16f2e3f9219e2e3b312a112b56bb8802 Mon Sep 17 00:00:00 2001 From: Wilker Date: Thu, 24 Aug 2023 07:50:59 +0800 Subject: [PATCH 05/10] [BOOKINGSG-4616][WK] fix unclickable issue after checked on category --- src/shared/nested-dropdown-list/list-item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/nested-dropdown-list/list-item.tsx b/src/shared/nested-dropdown-list/list-item.tsx index d4560be01..4f88a3e5c 100644 --- a/src/shared/nested-dropdown-list/list-item.tsx +++ b/src/shared/nested-dropdown-list/list-item.tsx @@ -64,7 +64,7 @@ export const ListItem = ({ }; const handleSelectParent = (event: React.ChangeEvent) => { - event.preventDefault(); + event.stopPropagation(); onSelectCategory(item); }; From 6244e6fbb84f05420734c06d392cffd5854fce40 Mon Sep 17 00:00:00 2001 From: Wilker Date: Thu, 24 Aug 2023 07:51:49 +0800 Subject: [PATCH 06/10] [BOOKINGSG-4616][WK] update stories/type description --- src/input-nested-multi-select/types.ts | 4 ++-- src/input-nested-select/types.ts | 1 + stories/form/form-nested-multi-select/props-table.tsx | 9 ++++++++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/input-nested-multi-select/types.ts b/src/input-nested-multi-select/types.ts index e5b2300cc..e61b3f15e 100644 --- a/src/input-nested-multi-select/types.ts +++ b/src/input-nested-multi-select/types.ts @@ -19,9 +19,9 @@ export interface InputNestedMultiSelectProps InputNestedSelectSharedProps, DropdownSearchProps, DropdownStyleProps { - /** Specifies key path to select particular option label */ + /** Specifies key paths to select particular option label */ selectedKeyPaths?: string[][] | undefined; - /** Called when option label is selected */ + /** Called when a selection is made. Returns the key paths and values of selected items in the next selection state */ onSelectOptions?: | ((keyPaths: string[][], values: Array) => void) | undefined; diff --git a/src/input-nested-select/types.ts b/src/input-nested-select/types.ts index 0235d883d..126540548 100644 --- a/src/input-nested-select/types.ts +++ b/src/input-nested-select/types.ts @@ -35,6 +35,7 @@ export interface InputNestedSelectProps selectedKeyPath?: string[] | undefined; /** If specified, the category label is selectable */ selectableCategory?: boolean | undefined; + /** Called when an option is selected. Returns the option's key path and value */ onSelectOption?: | ((keyPath: string[], value: V1 | V2 | V3) => void) | undefined; diff --git a/stories/form/form-nested-multi-select/props-table.tsx b/stories/form/form-nested-multi-select/props-table.tsx index 153356b65..02cb63f4f 100644 --- a/stories/form/form-nested-multi-select/props-table.tsx +++ b/stories/form/form-nested-multi-select/props-table.tsx @@ -15,7 +15,7 @@ const DATA: ApiTableSectionProps[] = [ }, { name: "selectedKeyPaths", - description: "The key path of the selected options", + description: "The key paths of the selected options", propTypes: ["string[][]"], }, { @@ -76,6 +76,13 @@ const DATA: ApiTableSectionProps[] = [ propTypes: [`"success"`, `"loading"`, `"failed"`], defaultValue: `"success"`, }, + { + name: "optionTruncationType", + description: + "Specifies the trunction type of the options display. Truncated text will be replaced with ellipsis", + propTypes: [`"end"`, `"middle"`], + defaultValue: `"end"`, + }, { name: "hideNoResultsDisplay", description: From 8ead8909a8900c1d23d048f483c5081d7f8b72c4 Mon Sep 17 00:00:00 2001 From: Wilker Date: Thu, 24 Aug 2023 10:21:15 +0800 Subject: [PATCH 07/10] [BOOKINGSG-4616][WK] update selected state for all selectedKeyPaths --- .../nested-dropdown-list-helper.ts | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/shared/nested-dropdown-list/nested-dropdown-list-helper.ts b/src/shared/nested-dropdown-list/nested-dropdown-list-helper.ts index 92b1b7518..cb6c1bf4a 100644 --- a/src/shared/nested-dropdown-list/nested-dropdown-list-helper.ts +++ b/src/shared/nested-dropdown-list/nested-dropdown-list-helper.ts @@ -82,14 +82,12 @@ export namespace NestedDropdownListHelper { targetKey.push(key); const item = getItemAtKeyPath(draft, targetKey); - const selected = - JSON.stringify(item.keyPath) === - JSON.stringify( - selectedKeyPaths[0]?.slice( - 0, - item.keyPath.length - ) - ); + const selected = selectedKeyPaths.some( + (keyPath) => + JSON.stringify(keyPath) === + JSON.stringify(item.keyPath) + ); + if (item.subItems) item.expanded = true; if (selected) item.selected = true; }); @@ -223,11 +221,11 @@ export namespace NestedDropdownListHelper { isPartialChecked || isPartialIndeterminate ) { - item.indeterminate = true; item.checked = false; + item.indeterminate = true; } else { - item.indeterminate = false; item.checked = false; + item.indeterminate = false; } } } From 0931c610d250bfb8e8fdf44eb9283c36fbe906ea Mon Sep 17 00:00:00 2001 From: Wilker Date: Thu, 24 Aug 2023 13:03:55 +0800 Subject: [PATCH 08/10] [BOOKINGSG-4616][WK] safe check listItemRef if it exist --- src/shared/nested-dropdown-list/nested-dropdown-list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/nested-dropdown-list/nested-dropdown-list.tsx b/src/shared/nested-dropdown-list/nested-dropdown-list.tsx index 223ff5440..962558f33 100644 --- a/src/shared/nested-dropdown-list/nested-dropdown-list.tsx +++ b/src/shared/nested-dropdown-list/nested-dropdown-list.tsx @@ -95,7 +95,7 @@ export const NestedDropdownList = ({ searchInputRef.current.focus(); } else if (listItemRefs.current) { const target = keyPaths[focusedIndex]; - listItemRefs.current[target[0]].ref.focus(); + listItemRefs.current[target[0]]?.ref.focus(); } if (multiSelect) { From c5833ae698a8671aef55f8d0c0349e6dbda6a2ae Mon Sep 17 00:00:00 2001 From: Wilker Date: Thu, 24 Aug 2023 13:04:55 +0800 Subject: [PATCH 09/10] [BOOKINGSG-4616][WK] amend stories --- stories/form/form-nested-multi-select/props-table.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stories/form/form-nested-multi-select/props-table.tsx b/stories/form/form-nested-multi-select/props-table.tsx index 02cb63f4f..4f508b873 100644 --- a/stories/form/form-nested-multi-select/props-table.tsx +++ b/stories/form/form-nested-multi-select/props-table.tsx @@ -5,7 +5,7 @@ import { SHARED_FORM_PROPS_DATA } from "../shared-props-data"; const DATA: ApiTableSectionProps[] = [ { - name: "InputNestedSelect specific props", + name: "InputNestedMultiSelect specific props", attributes: [ { name: "options", @@ -88,7 +88,7 @@ const DATA: ApiTableSectionProps[] = [ description: "If specified, the default no results display will not be rendered", propTypes: ["boolean"], - defaultValue: `"false"`, + defaultValue: "false", }, { name: "listStyleWidth", From a0da8a3c6e5bf8e3248d0f37657f1f6bbba8dc18 Mon Sep 17 00:00:00 2001 From: Wilker Date: Thu, 24 Aug 2023 13:16:02 +0800 Subject: [PATCH 10/10] [BOOKINGSG-4616][WK] remove trigger onHideOption during select item --- src/input-nested-multi-select/input-nested-multi-select.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/input-nested-multi-select/input-nested-multi-select.tsx b/src/input-nested-multi-select/input-nested-multi-select.tsx index 8adbfde0b..deba99e06 100644 --- a/src/input-nested-multi-select/input-nested-multi-select.tsx +++ b/src/input-nested-multi-select/input-nested-multi-select.tsx @@ -133,7 +133,6 @@ export const InputNestedMultiSelect = ({ setSelectedKeyPaths(newKeyPaths); setSelectedItems(newSelectedItems); - triggerOptionDisplayCallback(false); if (selectorRef.current) selectorRef.current.focus();