From 35881be6d14a81c3f5c825f3d22a37392e2cffaa Mon Sep 17 00:00:00 2001
From: WolverinDEV <git@teaspeak.de>
Date: Mon, 15 Jun 2020 17:02:28 +0200
Subject: [PATCH] Fixed a small UI display bug when directly opening the
 permission editor for the client/client channel permissions

---
 shared/js/ui/modal/permission/TabHandler.tsx | 23 ++++++++++----------
 shared/js/ui/react-elements/InputField.tsx   |  1 +
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/shared/js/ui/modal/permission/TabHandler.tsx b/shared/js/ui/modal/permission/TabHandler.tsx
index 1a66b08e..c2aa82ae 100644
--- a/shared/js/ui/modal/permission/TabHandler.tsx
+++ b/shared/js/ui/modal/permission/TabHandler.tsx
@@ -909,19 +909,22 @@ const ClientSelect = (props: { events: Registry<PermissionModalEvents>, tabTarge
         }
     });
 
-    props.events.reactUse("query_client_info", event => {
-        if(event.client !== clientIdentifier)
-            return;
-
+    const resetInfoFields = (placeholder?: string) => {
         refNickname.current?.setValue(undefined);
         refUniqueIdentifier.current?.setValue(undefined);
         refDatabaseId.current?.setValue(undefined);
 
-        refInput.current?.setState({ disabled: true });
-        refNickname.current?.setState({ placeholder: tr("loading...") });
-        refUniqueIdentifier.current?.setState({ placeholder: tr("loading...") });
-        refDatabaseId.current?.setState({ placeholder: tr("loading...") });
+        refNickname.current?.setState({ placeholder: placeholder });
+        refUniqueIdentifier.current?.setState({ placeholder: placeholder });
+        refDatabaseId.current?.setState({ placeholder: placeholder });
+    };
 
+    props.events.reactUse("query_client_info", event => {
+        if(event.client !== clientIdentifier)
+            return;
+
+        refInput.current?.setState({ disabled: true });
+        resetInfoFields(tr("loading..."));
         props.events.fire("action_set_permission_editor_subject", { mode: props.tabTarget, clientDatabaseId: 0 });
     });
 
@@ -963,9 +966,7 @@ const ClientSelect = (props: { events: Registry<PermissionModalEvents>, tabTarge
             props.events.fire_async("query_client_info", { client: event.id });
         } else {
             refInput.current?.setValue(undefined);
-            refNickname.current?.setState({ placeholder: undefined });
-            refUniqueIdentifier.current?.setState({ placeholder: undefined });
-            refDatabaseId.current?.setState({ placeholder: undefined });
+            resetInfoFields(undefined);
             props.events.fire("action_set_permission_editor_subject", { mode: props.tabTarget, clientDatabaseId: 0 });
         }
     });
diff --git a/shared/js/ui/react-elements/InputField.tsx b/shared/js/ui/react-elements/InputField.tsx
index 53f86cf8..0540b069 100644
--- a/shared/js/ui/react-elements/InputField.tsx
+++ b/shared/js/ui/react-elements/InputField.tsx
@@ -200,6 +200,7 @@ export class FlatInputField extends React.Component<FlatInputFieldProperties, Fl
 
     setValue(value: string | undefined) {
         this.refInput.current.value = typeof value === "undefined" ? "" : value;
+        this.setState({ filled: !!value });
     }
 
     inputElement() : HTMLInputElement | undefined {