From de8fb447a9da56206c00dab689d97feb4dfc2525 Mon Sep 17 00:00:00 2001
From: ANTOND <71350868+antond15@users.noreply.github.com>
Date: Tue, 9 Aug 2022 23:37:31 +0200
Subject: [PATCH] fix(web/dialog): setting non-selectable placeholder (#67)

* tweak(interface/menu): SetNuiFocusKeepInput

Default to allow input; disable with "disableInput = false" during registration.

* fix(web/dialog): Setting non-selectable placeholder

React doesn't like the 'selected' attribute (causing a warning in web console - not in-game).

'defaultValue' should be used instead so there is no need to create placeholder option if 'defaultValue' is already defined by row options.

* fix(web/dialog): Use proper type for onChange event

Co-authored-by: Linden <65407488+thelindat@users.noreply.github.com>
---
 web/src/features/dialog/components/select.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/features/dialog/components/select.tsx b/web/src/features/dialog/components/select.tsx
index 68e372f..e4b2c95 100644
--- a/web/src/features/dialog/components/select.tsx
+++ b/web/src/features/dialog/components/select.tsx
@@ -23,16 +23,16 @@ const SelectField: React.FC<Props> = (props) => {
     <>
       <Box mb={3} key={`select-${props.index}`}>
         <Select
-          onChange={(e) => props.handleChange(e.target.value, props.index)}
-          defaultValue={props.row.default}
+          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => props.handleChange(e.target.value, props.index)}
+          defaultValue={props.row.default || ""}
         >
           {/* Hacky workaround for selectable placeholder issue */}
-          <option value="" selected hidden disabled>
+          {!props.row.default && (<option value="" hidden disabled>
             {props.row.label}
-          </option>
+          </option>)}
           {props.row.options?.map((option, index) => (
             <option key={`option-${index}`} value={option.value}>
-              {option.label ? option.label : option.value}
+              {option.label || option.value}
             </option>
           ))}
         </Select>