wip: Modify SelectField so that it uses Autocomplete component instead of Select with single select

8 files changed, 15 insertions, 12 deletions

diff --git a/modern/src/settings/ComputedAttributePage.jsx b/modern/src/settings/ComputedAttributePage.jsx
index 3bae8231..f7ffe36e 100644
--- a/modern/src/settings/ComputedAttributePage.jsx
+++ b/modern/src/settings/ComputedAttributePage.jsx
@@ -156,7 +156,7 @@ const ComputedAttributePage = () => {
             </AccordionSummary>
             <AccordionDetails className={classes.details}>
               <SelectField
-                value={deviceId || 0}
+                value={deviceId || null}
                 onChange={(e) => setDeviceId(Number(e.target.value))}
                 endpoint="/api/devices"
                 label={t('sharedDevice')}
diff --git a/modern/src/settings/DevicePage.jsx b/modern/src/settings/DevicePage.jsx
index d8a30cbf..66a71cdb 100644
--- a/modern/src/settings/DevicePage.jsx
+++ b/modern/src/settings/DevicePage.jsx
@@ -103,7 +103,7 @@ const DevicePage = () => {
             </AccordionSummary>
             <AccordionDetails className={classes.details}>
               <SelectField
-                value={item.groupId || 0}
+                value={item.groupId || null}
                 onChange={(event) => setItem({ ...item, groupId: Number(event.target.value) })}
                 endpoint="/api/groups"
                 label={t('groupParent')}
@@ -134,7 +134,7 @@ const DevicePage = () => {
                 label={t('deviceCategory')}
               />
               <SelectField
-                value={item.calendarId || 0}
+                value={item.calendarId || null}
                 onChange={(event) => setItem({ ...item, calendarId: Number(event.target.value) })}
                 endpoint="/api/calendars"
                 label={t('sharedCalendar')}
diff --git a/modern/src/settings/GeofencePage.jsx b/modern/src/settings/GeofencePage.jsx
index b6c516a1..174bdfb1 100644
--- a/modern/src/settings/GeofencePage.jsx
+++ b/modern/src/settings/GeofencePage.jsx
@@ -76,7 +76,7 @@ const GeofencePage = () => {
                 label={t('sharedDescription')}
               />
               <SelectField
-                value={item.calendarId || 0}
+                value={item.calendarId || null}
                 onChange={(event) => setItem({ ...item, calendarId: Number(event.target.value) })}
                 endpoint="/api/calendars"
                 label={t('sharedCalendar')}
diff --git a/modern/src/settings/GroupPage.jsx b/modern/src/settings/GroupPage.jsx
index c4ca867d..b54e3b7f 100644
--- a/modern/src/settings/GroupPage.jsx
+++ b/modern/src/settings/GroupPage.jsx
@@ -81,7 +81,7 @@ const GroupPage = () => {
             </AccordionSummary>
             <AccordionDetails className={classes.details}>
               <SelectField
-                value={item.groupId || 0}
+                value={item.groupId || null}
                 onChange={(event) => setItem({ ...item, groupId: Number(event.target.value) })}
                 endpoint="/api/groups"
                 label={t('groupParent')}
diff --git a/modern/src/settings/PreferencesPage.jsx b/modern/src/settings/PreferencesPage.jsx
index bd96b140..53d205f5 100644
--- a/modern/src/settings/PreferencesPage.jsx
+++ b/modern/src/settings/PreferencesPage.jsx
@@ -272,8 +272,8 @@ const PreferencesPage = () => {
                   label={t('devicePrimaryInfo')}
                 />
                 <SelectField
-                  emptyValue=""
-                  value={attributes.deviceSecondary || ''}
+                  emptyValue={null}
+                  value={attributes.deviceSecondary || null}
                   onChange={(e) => setAttributes({ ...attributes, deviceSecondary: e.target.value })}
                   data={deviceFields}
                   titleGetter={(it) => t(it.name)}
diff --git a/modern/src/settings/ServerPage.jsx b/modern/src/settings/ServerPage.jsx
index 07ce2dad..4dc87887 100644
--- a/modern/src/settings/ServerPage.jsx
+++ b/modern/src/settings/ServerPage.jsx
@@ -193,10 +193,11 @@ const ServerPage = () => {
                   </Select>
                 </FormControl>
                 <SelectField
-                  value={item.attributes.timezone || ''}
-                  emptyValue=""
+                  value={item.attributes.timezone || null}
+                  emptyValue={null}
                   onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, timezone: e.target.value } })}
                   endpoint="/api/server/timezones"
+                  keyField={false}
                   keyGetter={(it) => it}
                   titleGetter={(it) => it}
                   label={t('sharedTimezone')}
diff --git a/modern/src/settings/UserPage.jsx b/modern/src/settings/UserPage.jsx
index d9a608ef..7411ee64 100644
--- a/modern/src/settings/UserPage.jsx
+++ b/modern/src/settings/UserPage.jsx
@@ -267,10 +267,11 @@ const UserPage = () => {
                 </Select>
               </FormControl>
               <SelectField
-                value={(item.attributes && item.attributes.timezone) || ''}
-                emptyValue=""
+                value={(item.attributes && item.attributes.timezone) || null}
+                emptyValue={null}
                 onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, timezone: e.target.value } })}
                 endpoint="/api/server/timezones"
+                keyField={false}
                 keyGetter={(it) => it}
                 titleGetter={(it) => it}
                 label={t('sharedTimezone')}
diff --git a/modern/src/settings/components/BaseCommandView.jsx b/modern/src/settings/components/BaseCommandView.jsx
index acf39090..070ecfed 100644
--- a/modern/src/settings/components/BaseCommandView.jsx
+++ b/modern/src/settings/components/BaseCommandView.jsx
@@ -28,9 +28,10 @@ const BaseCommandView = ({ deviceId, item, setItem }) => {
   return (
     <>
       <SelectField
-        value={item.type || ''}
+        value={item.type || null}
         onChange={(e) => setItem({ ...item, type: e.target.value, attributes: {} })}
         endpoint={deviceId ? `/api/commands/types?${new URLSearchParams({ deviceId }).toString()}` : '/api/commands/types'}
+        keyField='type'
         keyGetter={(it) => it.type}
         titleGetter={(it) => t(prefixString('command', it.type))}
         label={t('sharedType')}