@patternfly/react-core 4.201.1 → 4.202.1

package/src/components/Popover/Popover.tsx

@@ -67,7 +67,7 @@ export interface PopoverProps {
   /** Distance of the popover to its target, defaults to 25 */
   distance?: number;
   /**
-   * If true, tries to keep the popover in view by flipping it if necessary
+   * If true, tries to keep the popover in view by flipping it if necessary.
    * If the position is set to 'auto', this prop is ignored
    */
   enableFlip?: boolean;

package/src/components/Select/Select.tsx

@@ -122,7 +122,7 @@ export interface SelectProps
     isPlaceholder?: boolean
   ) => void;
   /** Callback for toggle button behavior */
-  onToggle: (isExpanded: boolean) => void;
+  onToggle: (isExpanded: boolean, event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => void;
   /** Callback for typeahead clear button */
   onClear?: (event: React.MouseEvent) => void;
   /** Optional callback for custom filtering */
@@ -159,6 +159,8 @@ export interface SelectProps
   isInputValuePersisted?: boolean;
   /** @beta Flag for retaining filter results on blur from keyboard-entered typeahead text */
   isInputFilterPersisted?: boolean;
+  /** Flag indicating the typeahead input value should reset upon selection */
+  shouldResetOnSelect?: boolean;
   /** Content rendered in the footer of the select menu */
   footer?: React.ReactNode;
 }
@@ -232,7 +234,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     chipGroupComponent: null,
     isInputValuePersisted: false,
     isInputFilterPersisted: false,
-    isCreateSelectOptionObject: false
+    isCreateSelectOptionObject: false,
+    shouldResetOnSelect: true
   };
 
   state: SelectState = {
@@ -328,7 +331,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     this.setState({ focusFirstOption: true });
   };
 
-  onToggle = (isExpanded: boolean) => {
+  onToggle = (isExpanded: boolean, e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => {
     const { isInputValuePersisted, onSelect, onToggle, hasInlineFilter } = this.props;
     if (!isExpanded && isInputValuePersisted && onSelect) {
       onSelect(undefined, this.inputRef.current ? this.inputRef.current.value : '');
@@ -338,7 +341,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         focusFirstOption: true
       });
     }
-    onToggle(isExpanded);
+    onToggle(isExpanded, e);
   };
 
   onClose = () => {
@@ -358,7 +361,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
 
   onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value.toString() !== '' && !this.props.isOpen) {
-      this.onToggle(true);
+      this.onToggle(true, e);
     }
 
     if (this.props.onTypeaheadInputChanged) {
@@ -503,9 +506,9 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     });
   };
 
-  onClick = (_e: React.MouseEvent) => {
+  onClick = (e: React.MouseEvent) => {
     if (!this.props.isOpen) {
-      this.onToggle(true);
+      this.onToggle(true, e);
     }
   };
 
@@ -678,10 +681,20 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           typeaheadCurrIndex !== -1 && // do not allow selection without moving to an initial option
           (typeaheadActiveChild || (this.refCollection[0] && this.refCollection[0][0]))
         ) {
-          this.setState({
-            typeaheadInputValue:
-              (typeaheadActiveChild && typeaheadActiveChild.innerText) || this.refCollection[0][0].innerText
-          });
+          if (typeaheadActiveChild) {
+            const hasDescriptionElm = typeaheadActiveChild.childElementCount > 1;
+            const typeaheadActiveChildText = hasDescriptionElm
+              ? (typeaheadActiveChild.firstChild as HTMLElement).innerText
+              : typeaheadActiveChild.innerText;
+            this.setState({
+              typeaheadInputValue: typeaheadActiveChildText
+            });
+          } else {
+            this.setState({
+              typeaheadInputValue: this.refCollection[0][0].innerText
+            });
+          }
+
           if (typeaheadActiveChild) {
             typeaheadActiveChild.click();
           } else {
@@ -755,7 +768,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         } else {
           // Close if there is no footer
           if (!this.props.footer) {
-            this.onToggle(false);
+            this.onToggle(false, null);
             this.onClose();
           } else {
             // has footer
@@ -764,14 +777,14 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             if (this.inputRef.current === document.activeElement) {
               if (shiftKey) {
                 // close toggle if shift key and tab on input
-                this.onToggle(false);
+                this.onToggle(false, null);
                 this.onClose();
               } else {
                 // tab to first tabbable item in footer
                 if (tabbableItems[0]) {
                   tabbableItems[0].focus();
                 } else {
-                  this.onToggle(false);
+                  this.onToggle(false, null);
                   this.onClose();
                 }
               }
@@ -791,7 +804,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                   tabbableItems[currentElementIndex + 1].focus();
                 } else {
                   // no next item, close toggle
-                  this.onToggle(false);
+                  this.onToggle(false, null);
                   this.inputRef.current.focus();
                   this.onClose();
                 }
@@ -947,6 +960,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       footer,
       loadingVariant,
       isCreateSelectOptionObject,
+      shouldResetOnSelect,
       ...props
     } = this.props;
     const {
@@ -1085,7 +1099,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                 } else if (event.key === KeyTypes.Tab && variant !== SelectVariant.checkbox && this.props.footer) {
                   // tab to footer or close menu if shift key
                   if (event.shiftKey) {
-                    this.onToggle(false);
+                    this.onToggle(false, event);
                   } else {
                     const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
                     if (tabbableItems.length > 0) {
@@ -1093,7 +1107,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                       event.stopPropagation();
                       event.preventDefault();
                     } else {
-                      this.onToggle(false);
+                      this.onToggle(false, event);
                     }
                   }
                 } else if (event.key === KeyTypes.Tab && variant === SelectVariant.checkbox) {
@@ -1367,7 +1381,14 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       <GenerateId>
         {randomId => (
           <SelectContext.Provider
-            value={{ onSelect, onFavorite, onClose: this.onClose, variant, inputIdPrefix: inputIdPrefix || randomId }}
+            value={{
+              onSelect,
+              onFavorite,
+              onClose: this.onClose,
+              variant,
+              inputIdPrefix: inputIdPrefix || randomId,
+              shouldResetOnSelect
+            }}
           >
             {menuAppendTo === 'inline' ? (
               mainContainer

package/src/components/Select/SelectOption.tsx

@@ -245,7 +245,8 @@ export class SelectOption extends React.Component<SelectOptionProps> {
       onClose: () => void,
       variant: string,
       inputIdPrefix: string,
-      onFavorite: (itemId: string, isFavorite: boolean) => void
+      onFavorite: (itemId: string, isFavorite: boolean) => void,
+      shouldResetOnSelect: boolean
     ) => {
       if (variant !== SelectVariant.checkbox && isLoading && isGrouped) {
         return (
@@ -323,7 +324,7 @@ export class SelectOption extends React.Component<SelectOptionProps> {
                     if (!isDisabled) {
                       onClick(event);
                       onSelect(event, value, isPlaceholder);
-                      onClose();
+                      shouldResetOnSelect && onClose();
                     }
                   }}
                   role="option"
@@ -449,8 +450,10 @@ export class SelectOption extends React.Component<SelectOptionProps> {
 
     return (
       <SelectConsumer>
-        {({ onSelect, onClose, variant, inputIdPrefix, onFavorite }) => (
-          <React.Fragment>{renderOption(onSelect, onClose, variant, inputIdPrefix, onFavorite)}</React.Fragment>
+        {({ onSelect, onClose, variant, inputIdPrefix, onFavorite, shouldResetOnSelect }) => (
+          <React.Fragment>
+            {renderOption(onSelect, onClose, variant, inputIdPrefix, onFavorite, shouldResetOnSelect)}
+          </React.Fragment>
         )}
       </SelectConsumer>
     );

package/src/components/Select/SelectToggle.tsx

@@ -18,7 +18,7 @@ export interface SelectToggleProps extends React.HTMLProps<HTMLElement> {
   /** Flag to indicate if select is open */
   isOpen?: boolean;
   /** Callback called when toggle is clicked */
-  onToggle?: (isExpanded: boolean) => void;
+  onToggle?: (isExpanded: boolean, event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => void;
   /** Callback for toggle open on keyboard entry */
   onEnter?: () => void;
   /** Callback for toggle close */
@@ -105,7 +105,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
     const clickedWithinMenu =
       menuRef && menuRef.current && menuRef.current.contains && menuRef.current.contains(event.target as Node);
     if (isOpen && !(clickedOnToggle || clickedWithinMenu)) {
-      onToggle(false);
+      onToggle(false, event);
       onClose();
     }
   };
@@ -140,7 +140,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
 
       // If no tabbable item in footer close select
       if (tabbableItems.length <= 0) {
-        onToggle(false);
+        onToggle(false, event);
         onClose();
         this.toggle.current.focus();
         return;
@@ -151,7 +151,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
           if (event.shiftKey) {
             if (variant !== 'checkbox') {
               // only close non checkbox variation on shift clicked
-              onToggle(false);
+              onToggle(false, event);
               onClose();
               this.toggle.current.focus();
             }
@@ -175,7 +175,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
           tabbableItems[currentElementIndex + 1].focus();
         } else {
           // no more footer items close menu
-          onToggle(false);
+          onToggle(false, event);
           onClose();
           this.toggle.current.focus();
         }
@@ -189,7 +189,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
       (event.key === KeyTypes.Escape || event.key === KeyTypes.Tab) &&
       (escFromToggle || escFromWithinMenu)
     ) {
-      onToggle(false);
+      onToggle(false, event);
       onClose();
       this.toggle.current.focus();
     }
@@ -206,7 +206,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
         if (isOpen) {
           handleTypeaheadKeys('enter');
         } else {
-          onToggle(!isOpen);
+          onToggle(!isOpen, event);
         }
       }
     }
@@ -221,11 +221,11 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
     }
     event.preventDefault();
     if ((event.key === KeyTypes.Tab || event.key === KeyTypes.Enter || event.key === KeyTypes.Space) && isOpen) {
-      onToggle(!isOpen);
+      onToggle(!isOpen, event);
       onClose();
       this.toggle.current.focus();
     } else if ((event.key === KeyTypes.Enter || event.key === KeyTypes.Space) && !isOpen) {
-      onToggle(!isOpen);
+      onToggle(!isOpen, event);
       onEnter();
     }
   };
@@ -290,8 +290,8 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
             )}
             aria-label={ariaLabel}
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            onClick={_event => {
-              onToggle(!isOpen);
+            onClick={event => {
+              onToggle(!isOpen, event);
               if (isOpen) {
                 onClose();
               }
@@ -318,9 +318,9 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
               className
             )}
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            onClick={_event => {
+            onClick={event => {
               if (!isDisabled) {
-                onToggle(!isOpen);
+                onToggle(!isOpen, event);
                 if (isOpen) {
                   onClose();
                 }
@@ -334,8 +334,8 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
               type={type}
               className={css(buttonStyles.button, styles.selectToggleButton, styles.modifiers.plain)}
               aria-label={ariaLabel}
-              onClick={_event => {
-                onToggle(!isOpen);
+              onClick={event => {
+                onToggle(!isOpen, event);
                 if (isOpen) {
                   onClose();
                 }

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

@@ -1184,6 +1184,7 @@ exports[`select custom select filter filters properly 1`] = `
   position="left"
   removeSelectionAriaLabel="Remove"
   selections={Array []}
+  shouldResetOnSelect={true}
   toggleAriaLabel="Options menu"
   toggleIcon={null}
   toggleId="custom-select-filters"
@@ -3123,6 +3124,7 @@ exports[`typeahead select test select existing option on a non-creatable select
   position="left"
   removeSelectionAriaLabel="Remove"
   selections={Array []}
+  shouldResetOnSelect={true}
   toggleAriaLabel="Options menu"
   toggleIcon={null}
   toggleId={null}

package/src/components/Select/examples/Select.md

@@ -299,7 +299,9 @@ class GroupedSingleSelectInput extends React.Component {
   }
 }
 ```
+
 ### Validated
+
 ```js
 import React from 'react';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
@@ -384,12 +386,15 @@ class ValidatedSelect extends React.Component {
         >
           {this.options}
         </Select>
-        <div aria-live="polite" id="validated-helper" hidden>{validated}</div>
+        <div aria-live="polite" id="validated-helper" hidden>
+          {validated}
+        </div>
       </div>
     );
   }
 }
 ```
+
 ### Checkbox input
 
 ```js
@@ -467,6 +472,7 @@ class CheckboxSelectInput extends React.Component {
   }
 }
 ```
+
 ### Checkbox input with counts
 
 ```js
@@ -719,7 +725,7 @@ class FilteringSingleSelectInput extends React.Component {
       selected: '',
       isCreatable: false,
       isInputValuePersisted: false,
-      isInputFilterPersisted: false,
+      isInputFilterPersisted: false
     };
 
     this.options = [
@@ -742,8 +748,7 @@ class FilteringSingleSelectInput extends React.Component {
     };
 
     this.onSelect = (event, selection) => {
-      this.setState({ selected: selection, isOpen: false }),
-      console.log('selected: ', selection);
+      this.setState({ selected: selection, isOpen: false }), console.log('selected: ', selection);
     };
 
     this.onFilter = (_, textInput) => {
@@ -784,7 +789,14 @@ class FilteringSingleSelectInput extends React.Component {
   }
 
   render() {
-    const { isOpen, selected, filteredOptions, isInputValuePersisted, isInputFilterPersisted, isCreatable } = this.state;
+    const {
+      isOpen,
+      selected,
+      filteredOptions,
+      isInputValuePersisted,
+      isInputFilterPersisted,
+      isCreatable
+    } = this.state;
     const titleId = 'single-filtering-select-id';
     return (
       <div>
@@ -1199,7 +1211,8 @@ class TypeaheadSelectInput extends React.Component {
       isCreatable: false,
       isInputValuePersisted: false,
       isInputFilterPersisted: false,
-      hasOnCreateOption: false
+      hasOnCreateOption: false,
+      resetOnSelect: true
     };
 
     this.onToggle = isOpen => {
@@ -1213,7 +1226,7 @@ class TypeaheadSelectInput extends React.Component {
       else {
         this.setState({
           selected: selection,
-          isOpen: false
+          isOpen: this.state.resetOnSelect ? false : this.state.isOpen
         });
         console.log('selected:', selection);
       }
@@ -1262,10 +1275,26 @@ class TypeaheadSelectInput extends React.Component {
         isInputFilterPersisted: checked
       });
     };
+
+    this.toggleResetOnSelect = checked => {
+      this.setState({
+        resetOnSelect: checked
+      });
+    };
   }
 
   render() {
-    const { isOpen, selected, isDisabled, isCreatable, hasOnCreateOption, isInputValuePersisted, isInputFilterPersisted, options } = this.state;
+    const {
+      isOpen,
+      selected,
+      isDisabled,
+      isCreatable,
+      hasOnCreateOption,
+      isInputValuePersisted,
+      isInputFilterPersisted,
+      resetOnSelect,
+      options
+    } = this.state;
     const titleId = 'typeahead-select-id-1';
     return (
       <div>
@@ -1287,6 +1316,7 @@ class TypeaheadSelectInput extends React.Component {
           isDisabled={isDisabled}
           isCreatable={isCreatable}
           onCreateOption={(hasOnCreateOption && this.onCreateOption) || undefined}
+          shouldResetOnSelect={resetOnSelect}
         >
           {options.map((option, index) => (
             <SelectOption
@@ -1337,6 +1367,14 @@ class TypeaheadSelectInput extends React.Component {
           id="toggle-input-filter-persisted"
           name="toggle-input-filter-persisted"
         />
+        <Checkbox
+          label="shouldResetOnSelect"
+          isChecked={this.state.resetOnSelect}
+          onChange={this.toggleResetOnSelect}
+          aria-label="toggle reset checkbox"
+          id="toggle-reset-typeahead"
+          name="toggle-reset-typeahead"
+        />
       </div>
     );
   }
@@ -1580,7 +1618,8 @@ class MultiTypeaheadSelectInput extends React.Component {
       selected: [],
       isCreatable: false,
       hasOnCreateOption: false,
-      hasDisabledOption: false
+      hasDisabledOption: false,
+      resetOnSelect: true
     };
 
     this.onCreateOption = newValue => {
@@ -1629,18 +1668,24 @@ class MultiTypeaheadSelectInput extends React.Component {
       });
     };
 
-    this.toggleOptionDisabled = (toggleIndex) => () => {
+    this.toggleOptionDisabled = toggleIndex => () => {
       this.setState(prevState => ({
         hasDisabledOption: !prevState.hasDisabledOption,
         options: prevState.options.map((option, index) =>
           index === toggleIndex ? { ...option, disabled: !option.disabled } : option
-        ),
+        )
       }));
     };
+
+    this.toggleResetOnSelect = checked => {
+      this.setState({
+        resetOnSelect: checked
+      });
+    };
   }
 
   render() {
-    const { isOpen, selected, isCreatable, hasOnCreateOption, options } = this.state;
+    const { isOpen, selected, isCreatable, hasOnCreateOption, resetOnSelect, options } = this.state;
     const titleId = 'multi-typeahead-select-id-1';
 
     return (
@@ -1660,6 +1705,7 @@ class MultiTypeaheadSelectInput extends React.Component {
           placeholderText="Select a state"
           isCreatable={isCreatable}
           onCreateOption={(hasOnCreateOption && this.onCreateOption) || undefined}
+          shouldResetOnSelect={resetOnSelect}
         >
           {options.map((option, index) => (
             <SelectOption
@@ -1694,6 +1740,14 @@ class MultiTypeaheadSelectInput extends React.Component {
           id="toggle-disable-first-option"
           name="toggle-disable-first-option"
         />
+        <Checkbox
+          label="shouldResetOnSelect"
+          isChecked={this.state.resetOnSelect}
+          onChange={this.toggleResetOnSelect}
+          aria-label="toggle multi reset checkbox"
+          id="toggle-reset-multi-typeahead"
+          name="toggle-reset-multi-typeahead"
+        />
       </div>
     );
   }
@@ -2379,8 +2433,6 @@ class SelectWithFooter extends React.Component {
     };
   }
 
-
-
   render() {
     const { isOpen, selected, isDisabled, direction, isToggleIcon } = this.state;
     const titleId = 'title-id-footer';
@@ -2400,11 +2452,13 @@ class SelectWithFooter extends React.Component {
           aria-labelledby={titleId}
           isDisabled={isDisabled}
           direction={direction}
-          footer={ <>
-            <Button variant="link" isInline>
-              Action
-            </Button>
-            </>}
+          footer={
+            <>
+              <Button variant="link" isInline>
+                Action
+              </Button>
+            </>
+          }
         >
           {this.options}
         </Select>
@@ -2483,7 +2537,11 @@ class SelectWithFooterCheckbox extends React.Component {
           isOpen={isOpen}
           placeholderText="Filter by status"
           aria-labelledby={titleId}
-          footer={<Button variant="link" isInline>Action</Button>}
+          footer={
+            <Button variant="link" isInline>
+              Action
+            </Button>
+          }
         >
           {this.options}
         </Select>
@@ -2497,11 +2555,7 @@ class SelectWithFooterCheckbox extends React.Component {
 
 ```js isBeta
 import React from 'react';
-import {
-  Select,
-  SelectOption,
-  SelectVariant
-} from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 
 class SelectViewMore extends React.Component {
   constructor(props) {
@@ -2578,7 +2632,10 @@ class SelectViewMore extends React.Component {
           selections={selected}
           isOpen={isOpen}
           aria-labelledby={titleId}
-          {...(!isLoading && numOptions < this.options.length && { loadingVariant: { text: 'View more', onClick: this.onViewMoreClick } })}
+          {...(!isLoading &&
+            numOptions < this.options.length && {
+              loadingVariant: { text: 'View more', onClick: this.onViewMoreClick }
+            })}
           {...(isLoading && { loadingVariant: 'spinner' })}
         >
           {this.options.slice(0, numOptions)}
@@ -2593,11 +2650,7 @@ class SelectViewMore extends React.Component {
 
 ```js isBeta
 import React from 'react';
-import {
-  Select,
-  SelectOption,
-  SelectVariant,
-} from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 
 class SelectViewMoreCheckbox extends React.Component {
   constructor(props) {
@@ -2649,7 +2702,6 @@ class SelectViewMoreCheckbox extends React.Component {
       });
     };
 
-
     this.simulateNetworkCall = callback => {
       setTimeout(callback, 2000);
     };
@@ -2682,7 +2734,10 @@ class SelectViewMoreCheckbox extends React.Component {
           isOpen={isOpen}
           placeholderText="Filter by status"
           aria-labelledby={titleId}
-          {...(!isLoading && numOptions < this.options.length && { loadingVariant: { text: 'View more', onClick: this.onViewMoreClick } })}
+          {...(!isLoading &&
+            numOptions < this.options.length && {
+              loadingVariant: { text: 'View more', onClick: this.onViewMoreClick }
+            })}
           {...(isLoading && { loadingVariant: 'spinner' })}
         >
           {this.options.slice(0, numOptions)}
@@ -2690,7 +2745,6 @@ class SelectViewMoreCheckbox extends React.Component {
       </div>
     );
   }
-
 }
 ```
 
@@ -2701,8 +2755,8 @@ import React from 'react';
 import { Select, SelectOption } from '@patternfly/react-core';
 
 function SelectWithPlaceholderStyle() {
-  const [ isOpen, setIsOpen ] = React.useState(false);
-  const [ selected, setSelected ] = React.useState([]);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState([]);
 
   const options = [
     <SelectOption key={0} value="Active" />,
@@ -2748,7 +2802,6 @@ function SelectWithPlaceholderStyle() {
 }
 ```
 
-
 ### With a style applied to the placeholder option
 
 ```js
@@ -2756,11 +2809,11 @@ import React from 'react';
 import { Select, SelectOption } from '@patternfly/react-core';
 
 function SelectWithPlaceholderStyle() {
-  const [ isOpen, setIsOpen ] = React.useState(false);
-  const [ selected, setSelected ] = React.useState([]);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState([]);
 
   const options = [
-    <SelectOption key={0} value="Filter by status" isPlaceholder/>,
+    <SelectOption key={0} value="Filter by status" isPlaceholder />,
     <SelectOption key={1} value="Active" />,
     <SelectOption key={2} value="Cancelled" />,
     <SelectOption key={3} value="Paused" />

package/src/components/Select/selectConstants.tsx

@@ -11,6 +11,7 @@ export interface SelectContextInterface {
   onFavorite: (itemId: string, isFavorite: boolean) => void;
   variant: string;
   inputIdPrefix: string;
+  shouldResetOnSelect: boolean;
 }
 
 export const SelectContext = React.createContext<SelectContextInterface | null>(null);