Revert "restore the existing implementation as much as possible"

This reverts commit ecf43a5.

Author: msmx-mnakagawa

src/scripts/Lookup.tsx

@@ -740,6 +740,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
         }, 10);
       }
     });
+
     const { getActiveElement } = useContext(ComponentSettingsContext);
     const isFocusedInComponent = useEventCallback(() => {
       const targetEl = getActiveElement();

src/scripts/Picklist.tsx

@@ -11,7 +11,6 @@ import React, {
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { Icon } from './Icon';
-import { Button, ButtonProps } from './Button';
 import {
   DropdownMenu,
   DropdownMenuItem,
@@ -55,6 +54,8 @@ const PicklistContext = createContext<{
  *
  */
 export type PicklistProps<MultiSelect extends boolean | undefined> = {
+  id?: string;
+  className?: string;
   label?: string;
   required?: boolean;
   multiSelect?: MultiSelect;
@@ -84,10 +85,8 @@ export type PicklistProps<MultiSelect extends boolean | undefined> = {
   onKeyDown?: (e: React.KeyboardEvent) => void;
   onBlur?: () => void;
   onComplete?: () => void;
-} & Omit<
-  ButtonProps,
-  'type' | 'value' | 'defaultValue' | 'onSelect' | 'onBlur' | 'onKeyDown'
->;
+  children?: React.ReactNode;
+};
 
 /**
  *
@@ -116,7 +115,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       tooltip,
       tooltipIcon,
       elementRef: elementRef_,
-      buttonRef: buttonRef_,
       dropdownRef: dropdownRef_,
       onSelect,
       onComplete,
@@ -162,8 +160,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
 
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
-    const buttonElRef = useRef<HTMLButtonElement | null>(null);
-    const buttonRef = useMergeRefs([buttonElRef, buttonRef_]);
+    const comboboxElRef = useRef<HTMLDivElement | null>(null);
     const dropdownElRef = useRef<HTMLDivElement | null>(null);
     const dropdownRef = useMergeRefs([dropdownElRef, dropdownRef_]);
 
@@ -197,6 +194,11 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       } else {
         // set only one value
         setPicklistValues([itemValue]);
+        setOpened(false);
+        setTimeout(() => {
+          comboboxElRef.current?.focus();
+          onComplete?.();
+        }, 10);
       }
     });
 
@@ -223,29 +225,14 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     });
 
     const onClick = useEventCallback(() => {
-      setOpened((opened) => !opened);
-      setTimeout(() => {
-        focusToTargetItemEl();
-      }, 10);
+      if (!disabled) {
+        setOpened((opened) => !opened);
+      }
     });
 
     const onPicklistItemSelect = useEventCallback((value: PicklistValue) => {
       updateItemValue(value);
       onSelect?.(value);
-      if (!multiSelect) {
-        // close if only single select
-        setTimeout(() => {
-          setOpened(false);
-          onComplete?.();
-          buttonElRef.current?.focus();
-        }, 200);
-      }
-    });
-
-    const onPicklistClose = useEventCallback(() => {
-      buttonElRef.current?.focus();
-      setOpened(false);
-      onComplete?.();
     });
 
     const onBlur = useEventCallback(() => {
@@ -284,7 +271,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     function getSelectedItemLabel() {
       // many items selected
       if (values.length > 1) {
-        return optionsSelectedText;
+        return `${values.length} ${optionsSelectedText}`;
       }
 
       // one item
@@ -356,34 +343,28 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
               className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right'
               role='none'
             >
-              <Button
-                id={id}
-                buttonRef={buttonRef}
-                {...rprops}
-                className={inputClassNames}
-                style={{ justifyContent: 'normal' }}
-                type='neutral'
-                disabled={disabled}
-                onClick={disabled ? undefined : onClick}
-                onBlur={disabled ? undefined : onBlur}
-                onKeyDown={disabled ? undefined : onKeydown}
+              <div
+                ref={comboboxElRef}
                 role='combobox'
                 tabIndex={disabled ? -1 : 0}
+                className={inputClassNames}
                 aria-controls={listboxId}
                 aria-expanded={opened}
                 aria-haspopup='listbox'
                 aria-disabled={disabled}
+                onClick={onClick}
+                onKeyDown={onKeydown}
+                onBlur={onBlur}
+                {...rprops}
               >
                 <span className='slds-truncate'>{getSelectedItemLabel()}</span>
-                <div>
-                  <Icon
-                    container={true}
-                    containerClassName='slds-icon-utility-down slds-input__icon slds-input__icon_right'
-                    icon='down'
-                    className='slds-icon slds-icon_x-small slds-icon-text-default'
-                  />
-                </div>
-              </Button>
+              </div>
+              <span className='slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right'>
+                <Icon
+                  icon='down'
+                  className='slds-icon slds-icon_x-small slds-icon-text-default'
+                />
+              </span>
             </div>
             {opened && (
               <DropdownMenu
@@ -392,7 +373,10 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 size={menuSize}
                 style={menuStyle}
                 onMenuSelect={onPicklistItemSelect}
-                onMenuClose={onPicklistClose}
+                onMenuClose={() => {
+                  setOpened(false);
+                  onComplete?.();
+                }}
                 onBlur={onBlur}
               >
                 <PicklistContext.Provider value={contextValue}>