Fixed metadata entry css

2 files changed, 19 insertions, 15 deletions

diff --git a/src/client/views/MetadataEntryMenu.scss b/src/client/views/MetadataEntryMenu.scss
index 469843350..a6df3cd1e 100644
--- a/src/client/views/MetadataEntryMenu.scss
+++ b/src/client/views/MetadataEntryMenu.scss
@@ -1,9 +1,3 @@
-.metadataEntry-input {
-    width: 40%;
-    margin-left: 5px;
-    margin-right: 5px;
-}
-
 .metadataEntry-outerDiv {
     display: flex;
     width: 300px;
@@ -13,15 +7,18 @@
     position: relative;
 }
 
+.react-autosuggest__container,
+.metadataEntry-input {
+    width: 100%;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+.metadataEntry-input,
 .react-autosuggest__input {
-    width: 240px;
-    height: 30px;
-    padding: 10px 20px;
-    font-family: Helvetica, sans-serif;
-    font-weight: 300;
-    font-size: 16px;
     border: 1px solid #aaa;
     border-radius: 4px;
+    width: 100%;
 }
 
 .react-autosuggest__input--focused {
@@ -40,7 +37,7 @@
 .react-autosuggest__suggestions-container--open {
     display: block;
     position: fixed;
-    width: 280px;
+    width: 180px;
     border: 1px solid #aaa;
     background-color: #fff;
     font-family: Helvetica, sans-serif;
diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx
index cb574aa96..59de0e2b4 100644
--- a/src/client/views/MetadataEntryMenu.tsx
+++ b/src/client/views/MetadataEntryMenu.tsx
@@ -19,6 +19,8 @@ export class MetadataEntryMenu extends React.Component<MetadataEntryProps>{
     @observable private _currentValue: string = "";
     @observable private suggestions: string[] = [];
 
+    private autosuggestRef = React.createRef<Autosuggest>();
+
     @action
     onKeyChange = (e: React.ChangeEvent, { newValue }: { newValue: string }) => {
         this._currentKey = newValue;
@@ -62,6 +64,10 @@ export class MetadataEntryMenu extends React.Component<MetadataEntryProps>{
     clearInputs = () => {
         this._currentKey = "";
         this._currentValue = "";
+        if (this.autosuggestRef.current) {
+            const input: HTMLInputElement = (this.autosuggestRef.current as any).input;
+            input && input.focus();
+        }
     }
 
     getKeySuggestions = async (value: string): Promise<string[]> => {
@@ -106,12 +112,13 @@ export class MetadataEntryMenu extends React.Component<MetadataEntryProps>{
         return (
             <div className="metadataEntry-outerDiv">
                 Key:
-                <Autosuggest inputProps={{ value: this._currentKey, onChange: this.onKeyChange, className: "metadataEntry-input" }}
+                <Autosuggest inputProps={{ value: this._currentKey, onChange: this.onKeyChange }}
                     getSuggestionValue={this.getSuggestionValue}
                     suggestions={this.suggestions}
                     renderSuggestion={this.renderSuggestion}
                     onSuggestionsFetchRequested={this.onSuggestionFetch}
-                    onSuggestionsClearRequested={this.onSuggestionClear} />
+                    onSuggestionsClearRequested={this.onSuggestionClear}
+                    ref={this.autosuggestRef} />
                 Value:
                 <input className="metadataEntry-input" value={this._currentValue} onChange={this.onValueChange} onKeyDown={this.onValueKeyDown} />
             </div>