@patternfly/react-templates 6.3.0-prerelease.3 → 6.3.0-prerelease.31

package/src/components/Select/MultiTypeaheadSelect.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
-import { Label, LabelGroup } from '@patternfly/react-core/dist/esm/components/Label';
+import { Label, LabelGroup, LabelProps } from '@patternfly/react-core/dist/esm/components/Label';
 import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 import {
   Select,
@@ -51,6 +51,10 @@ export interface MultiTypeaheadSelectProps extends Omit<SelectProps, 'toggle' |
   toggleWidth?: string;
   /** Additional props passed to the toggle. */
   toggleProps?: MenuToggleProps;
+  /** Additional props passed to each label of the selected option. */
+  labelProps?: LabelProps;
+  /** Initial value of the typeahead text input. */
+  initialInputValue?: string;
 }
 
 export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSelectProps> = ({
@@ -65,13 +69,15 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
   isDisabled,
   toggleWidth,
   toggleProps,
+  labelProps,
+  initialInputValue,
   ...props
 }: MultiTypeaheadSelectProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selected, setSelected] = useState<(string | number)[]>(
     (initialOptions?.filter((o) => o.selected) ?? []).map((o) => o.value)
   );
-  const [inputValue, setInputValue] = useState<string>();
+  const [inputValue, setInputValue] = useState<string>(initialInputValue);
   const [selectOptions, setSelectOptions] = useState<MultiTypeaheadSelectOption[]>(initialOptions);
   const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
   const [activeItemId, setActiveItemId] = useState<string | null>(null);
@@ -104,9 +110,6 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
           }
         ];
       }
-
-      // Open the menu when the input value changes and the new value is not empty
-      openMenu();
     }
 
     setSelectOptions(newSelectOptions);
@@ -170,6 +173,10 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
     setInputValue(value);
     onInputChange && onInputChange(value);
 
+    if (value && !isOpen) {
+      openMenu();
+    }
+
     resetActiveAndFocusedItem();
   };
 
@@ -302,10 +309,11 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
               <Label
                 key={index}
                 datatest-id={`${selection}-chip`}
-                onClick={(ev) => {
+                onClose={(ev) => {
                   ev.stopPropagation();
                   clearOption(ev, selection);
                 }}
+                {...labelProps}
               >
                 {initialOptions.find((o) => o.value === selection)?.content}
               </Label>

package/src/components/Select/__tests__/MultiTypeaheadSelect.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { render, screen, waitForElementToBeRemoved, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MultiTypeaheadSelect } from '../MultiTypeaheadSelect';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
@@ -413,6 +413,36 @@ describe('MultiTypeaheadSelect', () => {
     expect(onInputKeyDownMock).toHaveBeenCalledTimes(1);
   });
 
+  it('text input is empty by default', async () => {
+    render(<MultiTypeaheadSelect initialOptions={[]} />);
+
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveValue('');
+  });
+
+  it('initialInputValue prop sets the default text input value', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    const user = userEvent.setup();
+
+    render(<MultiTypeaheadSelect initialInputValue={'Option 1'} initialOptions={initialOptions} />);
+
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveValue('Option 1');
+
+    await user.click(input);
+
+    const menu = screen.getByRole('listbox');
+    const options = within(menu).getAllByRole('option');
+
+    expect(options).toHaveLength(1);
+    expect(options[0]).toHaveTextContent('Option 1');
+  });
+
   it('Matches snapshot', async () => {
     const initialOptions = [
       { content: 'Option 1', value: 'option1' },

package/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap

@@ -34,7 +34,7 @@ exports[`MultiTypeaheadSelect Matches snapshot 1`] = `
         <button
           aria-label="Clear input value"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-18"
+          data-ouia-component-id="OUIA-Generated-Button-plain-23"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -63,7 +63,7 @@ exports[`MultiTypeaheadSelect Matches snapshot 1`] = `
       aria-expanded="true"
       aria-label="Multi select Typeahead menu toggle"
       class="pf-v6-c-menu-toggle__button"
-      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-18"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-20"
       data-ouia-component-type="PF6/MenuToggle"
       data-ouia-safe="true"
       tabindex="-1"