admin(ui): fix remaining problems with SearchableSelect.tsx

resources/scripts/api/admin/databases/searchDatabases.ts

@@ -1,25 +1,18 @@
-import { Database, rawDataToDatabase } from '@/api/admin/databases/getDatabases';
 import http from '@/api/http';
+import { Database, rawDataToDatabase } from '@/api/admin/databases/getDatabases';
 
 interface Filters {
     name?: string;
     host?: string;
 }
 
-interface Wow {
-    [index: string]: string;
-}
-
 export default (filters?: Filters): Promise<Database[]> => {
-    let params = {};
+    const params = {};
     if (filters !== undefined) {
-        params = Object.keys(filters).map((key) => {
-            const a: Wow = {};
-            a[`filter[${key}]`] = (filters as unknown as Wow)[key];
-            return a;
+        Object.keys(filters).forEach(key => {
+            // @ts-ignore
+            params['filter[' + key + ']'] = filters[key];
         });
-
-        console.log(params);
     }
 
     return new Promise((resolve, reject) => {

resources/scripts/api/admin/locations/searchLocations.ts

@@ -1,7 +1,12 @@
 import http from '@/api/http';
 import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations';
 
-export default (filters?: Record<string, string>): Promise<Location[]> => {
+interface Filters {
+    short?: string;
+    long?: string;
+}
+
+export default (filters?: Filters): Promise<Location[]> => {
     const params = {};
     if (filters !== undefined) {
         Object.keys(filters).forEach(key => {

resources/scripts/api/admin/nodes/getNodes.ts

@@ -61,7 +61,7 @@ export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
     updatedAt: new Date(attributes.updated_at),
 
     relations: {
-        databaseHost: attributes.relationships?.databaseHost !== undefined ? rawDataToDatabase(attributes.relationships.databaseHost as FractalResponseData) : undefined,
+        databaseHost: attributes.relationships?.database_host !== undefined ? rawDataToDatabase(attributes.relationships.database_host as FractalResponseData) : undefined,
         location: attributes.relationships?.location !== undefined ? rawDataToLocation(attributes.relationships.location as FractalResponseData) : undefined,
     },
 });

resources/scripts/components/admin/nodes/DatabaseSelect.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
-import searchDatabases from '@/api/admin/databases/searchDatabases';
 import { Database } from '@/api/admin/databases/getDatabases';
+import searchDatabases from '@/api/admin/databases/searchDatabases';
+import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
 
-export default ({ selected }: { selected?: Database | null }) => {
-    const [ database, setDatabase ] = useState<Database | null>(selected || null);
+export default ({ selected }: { selected: Database | null }) => {
+    const [ database, setDatabase ] = useState<Database | null>(selected);
     const [ databases, setDatabases ] = useState<Database[]>([]);
 
     const onSearch = (query: string): Promise<void> => {
@@ -37,7 +37,7 @@ export default ({ selected }: { selected?: Database | null }) => {
             nullable
         >
             {databases.map(d => (
-                <Option key={d.id} id={d.id} item={d} active={d.id === database?.id}>
+                <Option key={d.id} selectId="database" id={d.id} item={d} active={d.id === database?.id}>
                     {d.name}
                 </Option>
             ))}

resources/scripts/components/admin/nodes/LocationSelect.tsx

@@ -1,140 +1,46 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components/macro';
-import tw from 'twin.macro';
-import Input from '@/components/elements/Input';
-import Label from '@/components/elements/Label';
+import React, { useState } from 'react';
 import { Location } from '@/api/admin/locations/getLocations';
 import searchLocations from '@/api/admin/locations/searchLocations';
-import InputSpinner from '@/components/elements/InputSpinner';
-import { debounce } from 'debounce';
+import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
 
-const Dropdown = styled.div<{ expanded: boolean }>`
-    ${tw`absolute mt-1 w-full rounded-md bg-neutral-900 shadow-lg z-10`};
-    ${props => !props.expanded && tw`hidden`};
-`;
-
-export default ({ defaultLocation }: { defaultLocation: Location | null }) => {
-    const [ loading, setLoading ] = useState(false);
-    const [ expanded, setExpanded ] = useState(false);
-    const [ location, setLocation ] = useState<Location | null>(defaultLocation);
+export default ({ selected }: { selected: Location | null }) => {
+    const [ location, setLocation ] = useState<Location | null>(selected);
     const [ locations, setLocations ] = useState<Location[]>([]);
 
-    const [ inputText, setInputText ] = useState('');
-
-    const onFocus = () => {
-        setInputText('');
-        setLocations([]);
-        setExpanded(true);
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise((resolve, reject) => {
+            searchLocations({ short: query }).then((locations) => {
+                setLocations(locations);
+                return resolve();
+            }).catch(reject);
+        });
     };
 
-    const search = debounce((query: string) => {
-        if (!expanded) {
-            return;
-        }
-
-        if (query === '' || query.length < 2) {
-            setLocations([]);
-            return;
-        }
-
-        setLoading(true);
-        searchLocations({ short: query }).then((locations) => {
-            setLocations(locations);
-        }).then(() => setLoading(false));
-    }, 250);
-
-    const selectLocation = (location: Location) => {
+    const onSelect = (location: Location) => {
         setLocation(location);
     };
 
-    useEffect(() => {
-        setInputText(location?.short || '');
-        setExpanded(false);
-    }, [ location ]);
-
-    useEffect(() => {
-        const handler = (e: KeyboardEvent) => {
-            if (e.key !== 'Escape') {
-                return;
-            }
-
-            setInputText(location?.short || '');
-            setExpanded(false);
-        };
-
-        window.addEventListener('keydown', handler);
-        return () => {
-            window.removeEventListener('keydown', handler);
-        };
-    }, [ expanded ]);
+    const getSelectedText = (location: Location | null): string => {
+        return location?.short || '';
+    };
 
     return (
-        <div>
-            <Label htmlFor="listbox-label">Location</Label>
-
-            <div css={tw`mt-1 relative`}>
-                <InputSpinner visible={loading}>
-                    <Input type="text" className="ignoreReadOnly" value={inputText} readOnly={!expanded} onFocus={onFocus} onChange={e => {
-                        setInputText(e.currentTarget.value);
-                        search(e.currentTarget.value);
-                    }}
-                    />
-                </InputSpinner>
-
-                <div css={tw`ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none`}>
-                    <svg css={tw`h-5 w-5 text-neutral-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                        <path clipRule="evenodd" fillRule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"/>
-                    </svg>
-                </div>
-
-                <Dropdown expanded={expanded}>
-                    {locations.length < 1 ?
-                        inputText.length < 2 ?
-                            <div css={tw`h-10 flex flex-row items-center px-3`}>
-                                <p css={tw`text-sm`}>Please type 2 or more characters.</p>
-                            </div>
-                            :
-                            <div css={tw`h-10 flex flex-row items-center px-3`}>
-                                <p css={tw`text-sm`}>No results found.</p>
-                            </div>
-                        :
-                        <ul tabIndex={-1} role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-item-3" css={tw`max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm`}>
-                            {locations.map(l => (
-                                l.id === location?.id ?
-                                    <li key={l.id} id={'listbox-item-' + l.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={(e) => {
-                                        e.stopPropagation();
-                                        selectLocation(l);
-                                    }}
-                                    >
-                                        <div css={tw`flex items-center`}>
-                                            <span css={tw`block font-medium truncate`}>
-                                                {l.short}
-                                            </span>
-                                        </div>
-
-                                        <span css={tw`absolute inset-y-0 right-0 flex items-center pr-4`}>
-                                            <svg css={tw`h-5 w-5 text-primary-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                                                <path clipRule="evenodd" fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
-                                            </svg>
-                                        </span>
-                                    </li>
-                                    :
-                                    <li key={l.id} id={'listbox-item-' + l.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={(e) => {
-                                        e.stopPropagation();
-                                        selectLocation(l);
-                                    }}
-                                    >
-                                        <div css={tw`flex items-center`}>
-                                            <span css={tw`block font-normal truncate`}>
-                                                {l.short}
-                                            </span>
-                                        </div>
-                                    </li>
-                            ))}
-                        </ul>
-                    }
-                </Dropdown>
-            </div>
-        </div>
+        <SearchableSelect
+            id="location"
+            name="Location"
+            items={locations}
+            selected={location}
+            setItems={setLocations}
+            onSearch={onSearch}
+            onSelect={onSelect}
+            getSelectedText={getSelectedText}
+            nullable
+        >
+            {locations.map(d => (
+                <Option key={d.id} selectId="location" id={d.id} item={d} active={d.id === location?.id}>
+                    {d.short}
+                </Option>
+            ))}
+        </SearchableSelect>
     );
 };

resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx

@@ -98,11 +98,11 @@ export default () => {
                                 </div>
 
                                 <div css={tw`mb-6`}>
-                                    <LocationSelect defaultLocation={node?.relations.location || null}/>
+                                    <LocationSelect selected={node?.relations.location || null}/>
                                 </div>
 
                                 <div css={tw`mb-6`}>
-                                    <DatabaseSelect selected={node?.relations.databaseHost}/>
+                                    <DatabaseSelect selected={node?.relations.databaseHost || null}/>
                                 </div>
 
                                 <div css={tw`mb-6`}>

resources/scripts/components/elements/SearchableSelect.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { createRef, ReactElement, useEffect, useState } from 'react';
 import { debounce } from 'debounce';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
@@ -35,12 +35,20 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
 
     const [ inputText, setInputText ] = useState('');
 
+    const searchInput = createRef<HTMLInputElement>();
+    const itemsList = createRef<HTMLDivElement>();
+
     const onFocus = () => {
         setInputText('');
         setItems([]);
         setExpanded(true);
     };
 
+    const onBlur = () => {
+        setInputText(getSelectedText(selected) || '');
+        setExpanded(false);
+    };
+
     const search = debounce((query: string) => {
         if (!expanded) {
             return;
@@ -53,7 +61,7 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
 
         setLoading(true);
         onSearch(query).then(() => setLoading(false));
-    }, 250);
+    }, 1000);
 
     useEffect(() => {
         setInputText(getSelectedText(selected) || '');
@@ -61,18 +69,52 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
     }, [ selected ]);
 
     useEffect(() => {
-        const handler = (e: KeyboardEvent) => {
-            if (e.key !== 'Escape') {
+        const keydownHandler = (e: KeyboardEvent) => {
+            if (e.key !== 'Tab' && e.key !== 'Escape') {
                 return;
             }
 
-            setInputText(getSelectedText(selected) || '');
-            setExpanded(false);
+            onBlur();
         };
 
-        window.addEventListener('keydown', handler);
+        const clickHandler = (e: MouseEvent) => {
+            const input = searchInput.current;
+            const menu = itemsList.current;
+
+            if (e.button === 2 || !expanded || !input || !menu) {
+                return;
+            }
+
+            if (e.target === input || input.contains(e.target as Node)) {
+                return;
+            }
+
+            if (e.target === menu || menu.contains(e.target as Node)) {
+                return;
+            }
+
+            if (e.target === input || input.contains(e.target as Node)) {
+                return;
+            }
+
+            if (e.target === menu || menu.contains(e.target as Node)) {
+                return;
+            }
+
+            onBlur();
+        };
+
+        const contextmenuHandler = () => {
+            onBlur();
+        };
+
+        window.addEventListener('keydown', keydownHandler);
+        window.addEventListener('click', clickHandler);
+        window.addEventListener('contextmenu', contextmenuHandler);
         return () => {
-            window.removeEventListener('keydown', handler);
+            window.removeEventListener('keydown', keydownHandler);
+            window.removeEventListener('click', clickHandler);
+            window.removeEventListener('contextmenu', contextmenuHandler);
         };
     }, [ expanded ]);
 
@@ -86,13 +128,16 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
         onClick: onClick.bind(child),
     }));
 
+    // @ts-ignore
+    const selectedId = selected?.id;
+
     return (
         <div>
-            <Label htmlFor={id}>{name}</Label>
+            <Label htmlFor={id + '-select-label'}>{name}</Label>
 
             <div css={tw`mt-1 relative`}>
                 <InputSpinner visible={loading}>
-                    <Input type="text" className="ignoreReadOnly" id={id} name={id} value={inputText} readOnly={!expanded} onFocus={onFocus} onChange={e => {
+                    <Input ref={searchInput} type="text" className="ignoreReadOnly" id={id} name={id} value={inputText} readOnly={!expanded} onFocus={onFocus} onChange={e => {
                         setInputText(e.currentTarget.value);
                         search(e.currentTarget.value);
                     }}
@@ -105,7 +150,7 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
                     </svg>
                 </div>
 
-                <Dropdown expanded={expanded}>
+                <Dropdown ref={itemsList} expanded={expanded}>
                     { items.length < 1 ?
                         inputText.length < 2 ?
                             <div css={tw`h-10 flex flex-row items-center px-3`}>
@@ -116,7 +161,13 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
                                 <p css={tw`text-sm`}>No results found.</p>
                             </div>
                         :
-                        <ul tabIndex={-1} css={tw`max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm`}>
+                        <ul
+                            tabIndex={-1}
+                            role={id + '-select'}
+                            aria-labelledby={id + '-select-label'}
+                            aria-activedescendant={id + '-select-item-' + selectedId}
+                            css={tw`max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm`}
+                        >
                             {c}
                         </ul>
                     }
@@ -127,6 +178,7 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
 }
 
 interface OptionProps<T> {
+    selectId: string;
     id: string | number;
     item: T;
     active: boolean;
@@ -136,7 +188,8 @@ interface OptionProps<T> {
     children: React.ReactNode;
 }
 
-export function Option<T> ({ id, item, active, onClick, children }: OptionProps<T>) {
+export function Option<T> ({ selectId, id, item, active, onClick, children }: OptionProps<T>) {
+    // This should never be true, but just in-case we set it to an empty function to make sure shit doesn't blow up.
     if (onClick === undefined) {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         onClick = () => () => {};
@@ -144,7 +197,7 @@ export function Option<T> ({ id, item, active, onClick, children }: OptionProps<
 
     if (active) {
         return (
-            <li id={'select-item-' + id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={onClick(item)}>
+            <li id={selectId + '-select-item-' + id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={onClick(item)}>
                 <div css={tw`flex items-center`}>
                     <span css={tw`block font-medium truncate`}>
                         {children}