From 664cfbc95b77271f59a3cbae82d78ff04e26fefe Mon Sep 17 00:00:00 2001 From: msmx-mnakagawa Date: Tue, 29 Jul 2025 14:54:42 +0900 Subject: [PATCH 1/5] Revert "(Picklist): remove a style disabling a focus outline" This reverts commit 42543c59d13fa01fee1873c6906e65180e566a6d. --- src/scripts/Picklist.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx index 8c192204..dd9d493c 100644 --- a/src/scripts/Picklist.tsx +++ b/src/scripts/Picklist.tsx @@ -191,6 +191,7 @@ const PicklistContext = createContext<{ function useInitComponentStyle() { useEffect(() => { registerStyle('picklist', [ + ['.react-picklist-input:focus-visible', '{ outline: none; }'], ['.react-picklist-input:not(:disabled)', '{ cursor: pointer; }'], ]); }, []); From b0bebd7ee81de02ce96512293b28ec8259bd522c Mon Sep 17 00:00:00 2001 From: msmx-mnakagawa Date: Tue, 29 Jul 2025 14:54:58 +0900 Subject: [PATCH 2/5] Revert "tweak a style of `Picklist` input" This reverts commit b226640db27dc920b713ae33e0aa45f134fbc31a. --- src/scripts/Picklist.tsx | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx index dd9d493c..7a8b7034 100644 --- a/src/scripts/Picklist.tsx +++ b/src/scripts/Picklist.tsx @@ -17,7 +17,7 @@ import { FormElement, FormElementProps } from './FormElement'; import { Icon } from './Icon'; import { AutoAlign, RectangleAlignment } from './AutoAlign'; import { DropdownMenuProps } from './DropdownMenu'; -import { registerStyle, isElInChildren } from './util'; +import { isElInChildren } from './util'; import { ComponentSettingsContext } from './ComponentSettings'; import { useControlledValue, useEventCallback, useMergeRefs } from './hooks'; import { createFC } from './common'; @@ -185,18 +185,6 @@ const PicklistContext = createContext<{ optionIdPrefix: '', }); -/** - * - */ -function useInitComponentStyle() { - useEffect(() => { - registerStyle('picklist', [ - ['.react-picklist-input:focus-visible', '{ outline: none; }'], - ['.react-picklist-input:not(:disabled)', '{ cursor: pointer; }'], - ]); - }, []); -} - /** * */ @@ -274,8 +262,6 @@ export const Picklist: (( ...rprops } = props; - useInitComponentStyle(); - const fallbackId = useId(); const id = id_ ?? fallbackId; const listboxId = `${id}-listbox`; @@ -571,7 +557,6 @@ export const Picklist: (( } ); const inputClassNames = classnames( - 'react-picklist-input', 'slds-input_faux', 'slds-combobox__input', { From 79c5729ffd11a47f934334c2f0b48408b9d239d5 Mon Sep 17 00:00:00 2001 From: msmx-mnakagawa Date: Tue, 29 Jul 2025 14:55:07 +0900 Subject: [PATCH 3/5] Revert "(Picklist, Lookup): use inputs with `type="text"` for better a11y" This reverts commit 4adb6643f4a1384be6f2fa78a7fd3da629cccc87. --- src/scripts/Lookup.tsx | 11 +++++------ src/scripts/Picklist.tsx | 21 ++++++++++----------- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx index ebaa3a57..9728ae72 100644 --- a/src/scripts/Lookup.tsx +++ b/src/scripts/Lookup.tsx @@ -152,18 +152,17 @@ const LookupSelectedState: FC = ({ size='small' /> )} - + > + {selected.label} + Date: Tue, 29 Jul 2025 14:55:16 +0900 Subject: [PATCH 4/5] Revert "(Picklist): execute `extractTextContent()` inside `extractTextContent()`" This reverts commit 6ab7b63d82006332a7131f6942908da9b0bbd01a. --- src/scripts/Picklist.tsx | 41 +++------------------------------------- 1 file changed, 3 insertions(+), 38 deletions(-) diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx index f06a516c..e7ba71b2 100644 --- a/src/scripts/Picklist.tsx +++ b/src/scripts/Picklist.tsx @@ -67,7 +67,7 @@ function collectOptionValues(children: unknown): PicklistValue[] { function findSelectedItemLabel( children: unknown, selectedValue: PicklistValue -): string | number | null { +): React.ReactNode | null { return ( React.Children.map(children, (child) => { if (!React.isValidElement(child)) { @@ -107,14 +107,14 @@ function findSelectedItemLabel( typeof label === 'string' || typeof label === 'number' || React.isValidElement(label) - ? extractTextContent(label) + ? label : undefined; const childrenValue = typeof itemChildren === 'string' || typeof itemChildren === 'number' || React.isValidElement(itemChildren) || Array.isArray(itemChildren) - ? extractTextContent(itemChildren) + ? itemChildren : undefined; return labelValue || childrenValue; @@ -122,41 +122,6 @@ function findSelectedItemLabel( ); } -/** - * Extract text content from React node recursively - */ -function extractTextContent(node: unknown): string | number | null { - if (node == null) { - return null; - } - - if (typeof node === 'string' || typeof node === 'number') { - return node; - } - - if (typeof node === 'boolean') { - return String(node); - } - - if (Array.isArray(node)) { - return node - .map(extractTextContent) - .filter((result) => result !== null) - .join(''); - } - - if ( - React.isValidElement(node) && - node.props && - typeof node.props === 'object' && - 'children' in node.props - ) { - return extractTextContent(node.props.children); - } - - return null; -} - /** * */ From 8b87e05bd23a61bdeae7126b5a194ac8412e5500 Mon Sep 17 00:00:00 2001 From: msmx-mnakagawa Date: Tue, 29 Jul 2025 15:03:56 +0900 Subject: [PATCH 5/5] (Picklist): add `disabled` prop to the `combobox` --- src/scripts/Picklist.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx index e7ba71b2..eb579c6d 100644 --- a/src/scripts/Picklist.tsx +++ b/src/scripts/Picklist.tsx @@ -588,6 +588,7 @@ export const Picklist: (( onClick={onClick} onKeyDown={onKeyDown} onBlur={onBlur} + disabled={disabled} {...rprops} > {selectedItemLabel}