device_name: Prevent focus loss when starting to edit device name.

Adding the input text child conditionally results in creating an
input group div around the input element. This results in the browser
removing the input element from the DOM and adding a new unfocused one.

Author: rtrbt

software/web/src/modules/device_name/main.tsx

@@ -39,6 +39,8 @@ export class DeviceNameStatus extends ConfigComponent<"info/display_name"> {
 
         document.title = API.get("info/display_name").display_name + " - " + __("main.title");
 
+        const hide_save = state.display_name == API.get('info/display_name').display_name;
+
         return <StatusSection name="device_name" class="sticky-under-top">
             <PageHeader title={__("device_name.status.status")} titleClass="col-4" childrenClass="col-8">
                 <form onSubmit={(e: Event) => {
@@ -49,12 +51,10 @@ export class DeviceNameStatus extends ConfigComponent<"info/display_name"> {
 
                     API.save("info/display_name", state, __("device_name.script.save_failed"));
                 }}>
-                    <InputText maxLength={32} value={state.display_name} onValue={(v) => this.setState({display_name: v})} required>
-                        {state.display_name == API.get('info/display_name').display_name ? undefined :
-                            <div class="input-group-append">
-                                <Button className="form-control rounded-right" type="submit"><Save/></Button>
-                            </div>
-                        }
+                    <InputText class={hide_save ? "rounded-right" : undefined} maxLength={32} value={state.display_name} onValue={(v) => this.setState({display_name: v})} required>
+                        <div class="input-group-append">
+                            <Button className="form-control rounded-right" type="submit" hidden={hide_save} disabled={hide_save}><Save/></Button>
+                        </div>
                     </InputText>
                 </form>
             </PageHeader>