From 0bdb5596d318761b38eaeb69dd5da2cad302b3e6 Mon Sep 17 00:00:00 2001
From: Marius Vollmer <marius.vollmer@gmail.com>
Date: Thu, 14 Nov 2024 16:03:35 +0200
Subject: [PATCH] Improvements to the TypeaheadSelect template (#11153)

* Avoid "any" type in TypeaheadSelect template

* Don't show "Clear" button without onClearSelection function

If there is no such function, nothing will change when clicking that
button, and it is less confusing to not show it in that case.

* Fix TypeScript error in TypeaheadSelect

This one:

# pkg/lib/cockpit-components-typeahead-select.tsx:406:6 - error TS2375: Type '{ children: Element; className?: string; isExpanded: boolean; isDisabled: boolean | undefined; isFullHeight?: boolean; isFullWidth: boolean; splitButtonOptions?: SplitButtonOptions; ... 281 more ...; ref: Ref<...>; }' is not assignable to type 'MenuToggleProps' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
#   Types of property 'isDisabled' are incompatible.
#     Type 'boolean | undefined' is not assignable to type 'boolean'.
#       Type 'undefined' is not assignable to type 'boolean'.
---
 .../src/components/Select/TypeaheadSelect.tsx             | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-templates/src/components/Select/TypeaheadSelect.tsx b/packages/react-templates/src/components/Select/TypeaheadSelect.tsx
index a2bcd148216..e344ebff1c5 100644
--- a/packages/react-templates/src/components/Select/TypeaheadSelect.tsx
+++ b/packages/react-templates/src/components/Select/TypeaheadSelect.tsx
@@ -26,7 +26,7 @@ export interface TypeaheadSelectOption extends Omit<SelectOptionProps, 'content'
 
 export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSelect'> {
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.Ref<HTMLDivElement>;
   /** Options of the select */
   selectOptions: TypeaheadSelectOption[];
   /** Callback triggered on selection. */
@@ -325,7 +325,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
       aria-label="Typeahead menu toggle"
       onClick={onToggleClick}
       isExpanded={isOpen}
-      isDisabled={isDisabled}
+      isDisabled={isDisabled || false}
       isFullWidth
       style={
         {
@@ -349,7 +349,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
           aria-controls="select-typeahead-listbox"
         />
         <TextInputGroupUtilities
-          {...(!(isFiltering && filterValue) && !selected ? { style: { display: 'none' } } : {})}
+          {...(!(isFiltering && filterValue) && !(selected && onClearSelection) ? { style: { display: 'none' } } : {})}
         >
           <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
             <TimesIcon aria-hidden />
@@ -386,7 +386,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
 };
 TypeaheadSelectBase.displayName = 'TypeaheadSelectBase';
 
-export const TypeaheadSelect = React.forwardRef((props: TypeaheadSelectProps, ref: React.Ref<any>) => (
+export const TypeaheadSelect = React.forwardRef((props: TypeaheadSelectProps, ref: React.Ref<HTMLDivElement>) => (
   <TypeaheadSelectBase {...props} innerRef={ref} />
 ));