#479 #477 #395 - Picker - bug fixes

packages/react-components/src/components/Picker/Picker.tsx

@@ -120,7 +120,7 @@ export const Picker: React.FC<IPickerProps> = ({
       return onSelect(null);
     }
 
-    const newSelectedItems = items.filter((item) =>
+    const newSelectedItems = options.filter((item) =>
       newSelectedItemsKeys.includes(item.key)
     );
 
@@ -208,6 +208,7 @@ export const Picker: React.FC<IPickerProps> = ({
           <TriggerBody
             isOpen={isListOpen}
             isSearchDisabled={searchDisabled}
+            isDisabled={disabled}
             placeholder={placeholder}
             iconSize={tagIconSize}
             items={selected}

packages/react-components/src/components/Picker/PickerList.module.scss

@@ -35,7 +35,6 @@ $base-class: 'picker-list';
     cursor: pointer;
     padding: 6px 11px;
     height: 36px;
-    overflow: hidden;
 
     &:hover {
       background-color: var(--surface-basic-hover);
@@ -72,6 +71,13 @@ $base-class: 'picker-list';
       font-weight: 600;
     }
 
+    &__content {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     &__custom {
       width: 100%;
       height: auto;

packages/react-components/src/components/Picker/PickerList.spec.tsx

@@ -53,23 +53,23 @@ describe('<PickerList> component', () => {
   });
 
   it('should mark selected list item as selected', () => {
-    const { getByText } = renderComponent({
+    const { getByTestId } = renderComponent({
       ...defaultProps,
       isOpen: true,
       selectedItemsKeys: ['three'],
     });
 
-    expect(getByText('Option three')).toHaveAttribute('aria-selected', 'true');
+    expect(getByTestId('three')).toHaveAttribute('aria-selected', 'true');
   });
 
   it('should mark selected list item as disabled', () => {
-    const { getByText } = renderComponent({
+    const { getByTestId } = renderComponent({
       ...defaultProps,
       isOpen: true,
       items: [{ key: 'three', name: 'Option three', disabled: true }],
     });
 
-    expect(getByText('Option three')).toHaveAttribute('aria-disabled', 'true');
+    expect(getByTestId('three')).toHaveAttribute('aria-disabled', 'true');
   });
 
   it('should display default empty state if no filter result', () => {

packages/react-components/src/components/Picker/PickerList.tsx

@@ -224,6 +224,7 @@ export const PickerList: React.FC<IPickerListProps> = ({
 
         return (
           <li
+            data-testid={item.key}
             ref={(element) => {
               if (currentItemKey === item.key) {
                 element?.scrollIntoView({ block: 'nearest' });
@@ -240,7 +241,9 @@ export const PickerList: React.FC<IPickerListProps> = ({
             })}
             onClick={() => !item.disabled && handleOnClick(item)}
           >
-            {getOptionContent(item)}
+            <div className={styles[`${itemClassName}__content`]}>
+              {getOptionContent(item)}
+            </div>
             {isItemSelected(item.key) && <Icon kind="link" source={Check} />}
           </li>
         );

packages/react-components/src/components/Picker/TriggerBody.module.scss

@@ -6,6 +6,13 @@ $base-class: 'picker-trigger-body';
   gap: 4px;
   justify-content: flex-start;
 
+  &__item {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   &__input {
     display: flex;
     flex-grow: 2;

packages/react-components/src/components/Picker/TriggerBody.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import cx from 'clsx';
 
 import { IPickerListItem } from './PickerList';
 import { Tag } from '../Tag';
@@ -12,6 +13,7 @@ const baseClass = 'picker-trigger-body';
 export interface ITriggerBodyProps {
   isOpen: boolean;
   isSearchDisabled?: boolean;
+  isDisabled?: boolean;
   placeholder: string;
   items?: IPickerListItem[] | null;
   type: PickerType;
@@ -23,6 +25,7 @@ export interface ITriggerBodyProps {
 export const TriggerBody: React.FC<ITriggerBodyProps> = ({
   isOpen,
   isSearchDisabled,
+  isDisabled,
   placeholder,
   items,
   type,
@@ -45,7 +48,7 @@ export const TriggerBody: React.FC<ITriggerBodyProps> = ({
       );
     }
 
-    return item.name;
+    return <div className={styles[`${baseClass}__item`]}>{item.name}</div>;
   };
 
   const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -75,7 +78,7 @@ export const TriggerBody: React.FC<ITriggerBodyProps> = ({
                 key={item.name}
                 className={styles[`${baseClass}__tag`]}
                 iconSize={iconSize}
-                dismissible
+                dismissible={!isDisabled}
                 onRemove={() => onItemRemove(item)}
               >
                 {getSingleItem(item)}