Wizard: Disable "No results found" options

The "No results found for <searchTerm>" options were previously enabled, but ignored upon click. This disables them properly and adds tests to check if they're disabled.

src/Components/CreateImageWizard/steps/Locale/components/KeyboardDropDown.tsx

@@ -44,9 +44,6 @@ const KeyboardDropDown = () => {
       filteredKeyboards = keyboardsList.filter((keyboard: string) =>
         String(keyboard).toLowerCase().includes(filterValue.toLowerCase())
       );
-      if (!filteredKeyboards.length) {
-        filteredKeyboards = [`No results found for "${filterValue}"`];
-      }
       if (!isOpen) {
         setIsOpen(true);
       }
@@ -73,7 +70,7 @@ const KeyboardDropDown = () => {
   };
 
   const onSelect = (_event: React.MouseEvent, value: string) => {
-    if (value && !value.includes('No results')) {
+    if (value) {
       setInputValue(value);
       setFilterValue('');
       setErrorText('');
@@ -147,11 +144,17 @@ const KeyboardDropDown = () => {
         shouldFocusFirstItemOnOpen={false}
       >
         <SelectList>
-          {selectOptions.map((option) => (
-            <SelectOption key={option} value={option}>
-              {option}
+          {selectOptions.length > 0 ? (
+            selectOptions.map((option) => (
+              <SelectOption key={option} value={option}>
+                {option}
+              </SelectOption>
+            ))
+          ) : (
+            <SelectOption isDisabled>
+              {`No results found for "${filterValue}"`}
             </SelectOption>
-          ))}
+          )}
         </SelectList>
       </Select>
       {errorText && (

src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx

@@ -49,9 +49,6 @@ const LanguagesDropDown = () => {
       filteredLanguages = languagesList.filter((language: string) =>
         String(language).toLowerCase().includes(filterValue.toLowerCase())
       );
-      if (!filteredLanguages.length) {
-        filteredLanguages = [`No results found for "${filterValue}"`];
-      }
       if (!isOpen) {
         setIsOpen(true);
       }
@@ -78,7 +75,7 @@ const LanguagesDropDown = () => {
   };
 
   const onSelect = (_event: React.MouseEvent, value: string) => {
-    if (value && !value.includes('No results')) {
+    if (value) {
       setInputValue('');
       setFilterValue('');
       dispatch(addLanguage(value));
@@ -151,18 +148,24 @@ const LanguagesDropDown = () => {
         shouldFocusFirstItemOnOpen={false}
       >
         <SelectList>
-          {selectOptions.map((option) => (
-            <SelectOption
-              key={option}
-              value={option}
-              isDisabled={languages?.includes(option) || false}
-              description={
-                languages?.includes(option) && 'Language already added'
-              }
-            >
-              {option}
+          {selectOptions.length > 0 ? (
+            selectOptions.map((option) => (
+              <SelectOption
+                key={option}
+                value={option}
+                isDisabled={languages?.includes(option) || false}
+                description={
+                  languages?.includes(option) && 'Language already added'
+                }
+              >
+                {option}
+              </SelectOption>
+            ))
+          ) : (
+            <SelectOption isDisabled>
+              {`No results found for "${filterValue}"`}
             </SelectOption>
-          ))}
+          )}
         </SelectList>
       </Select>
       {unknownLanguages.length > 0 && (

src/Components/CreateImageWizard/steps/Timezone/components/TimezoneDropDown.tsx

@@ -43,9 +43,6 @@ const TimezoneDropDown = () => {
       filteredTimezones = timezones.filter((timezone: string) =>
         String(timezone).toLowerCase().includes(filterValue.toLowerCase())
       );
-      if (!filteredTimezones.length) {
-        filteredTimezones = [`No results found for "${filterValue}"`];
-      }
       if (!isOpen) {
         setIsOpen(true);
       }
@@ -70,7 +67,7 @@ const TimezoneDropDown = () => {
   };
 
   const onSelect = (_event: React.MouseEvent, value: string) => {
-    if (value && !value.includes('No results')) {
+    if (value) {
       setInputValue(value);
       setFilterValue('');
       setErrorText('');
@@ -144,11 +141,17 @@ const TimezoneDropDown = () => {
         shouldFocusFirstItemOnOpen={false}
       >
         <SelectList>
-          {selectOptions.map((option) => (
-            <SelectOption key={option} value={option}>
-              {option}
+          {selectOptions.length > 0 ? (
+            selectOptions.map((option) => (
+              <SelectOption key={option} value={option}>
+                {option}
+              </SelectOption>
+            ))
+          ) : (
+            <SelectOption isDisabled>
+              {`No results found for "${filterValue}"`}
             </SelectOption>
-          ))}
+          )}
         </SelectList>
       </Select>
       {errorText && (