Merge pull request #239 from kbase/UFI-60

a bit more refinement [UFI-60]
kbaseattic · Jul 21, 2023 · 4ba096a · 4ba096a
2 parents e9e2d0b + ecc0ac7
commit 4ba096a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 37 deletions.
diff --git a/src/plugin/iframe_root/modules/reactComponents/TypeaheadInput.css b/src/plugin/iframe_root/modules/reactComponents/TypeaheadInput.css
@@ -45,6 +45,20 @@
     overflow: auto
 }
 
+.TypeaheadInput .-dropdown-wrapper > .-dropdown-items .-dropdown-item {
+    padding: 4px;
+    cursor: pointer;
+}
+
+.TypeaheadInput .-dropdown-wrapper > .-dropdown-items .-dropdown-item:hover {
+    background-color: rgba(200, 200, 200, 0.2);
+}
+
+.TypeaheadInput .-dropdown-wrapper > .-dropdown-items .-dropdown-item:active {
+    background-color: rgba(200, 200, 200, 0.5);
+}
+
+
 .TypeaheadInput .-search-button {
     cursor: pointer;
 }
diff --git a/src/plugin/iframe_root/modules/reactComponents/TypeaheadInput.js b/src/plugin/iframe_root/modules/reactComponents/TypeaheadInput.js
@@ -115,26 +115,21 @@ define([
 
         onInput(e) {
             const value = e.target.value;
-            const result = this.inputUpdated(value);
-            // if (result.status === 'ERROR') {
-            //     return;
-            // }
+            this.inputUpdated(value);
             this.props.onSelect(value);
         }
 
         onKeyDown(event) {
-            if (event.key === 'Tab') {
-                this.tabbing = true;
-            } else {
-                this.tabbing = false;
+            if (event.key === 'Tab' || event.key === 'Escape' || event.key === 'Enter') {
+                this.closeDropdown();
             }
         }
 
         doToggleSearch(e) {
             e.stopPropagation();
             this.inputRef.current.focus();
             if (this.state.status !== 'SUCCESS') {
-                const totalCount = this.data.length;
+                const totalCount = this.props.data.length;
                 this.setState({
                     status: 'SUCCESS',
                     value: {
@@ -173,19 +168,6 @@ define([
             this.props.onSelect(this.state.inputValue);
         }
 
-        onKeyPress(e) {
-            if (e.key === 'Enter' || e.key === 'Escape') {
-                e.preventDefault();
-                this.closeDropdown();
-            }
-        }
-
-        onBlur() {
-            if (this.tabbing) {
-                this.closeDropdown();
-            }
-        }
-
         renderCancelSearchButton() {
             if (!this.state.userOpenedSearch) {
                 return;
@@ -200,18 +182,18 @@ define([
         doSelectValue(value) {
             this.setState({
                 ...this.state,
-                value: {
-                    value
-                },
+                // value,
                 inputValue: value,
                 userOpenedSearch: false
             });
             this.props.onSelect(value);
+            this.inputRef.current.focus();
         }
 
         leaveAsIs(ev) {
             ev.preventDefault();
             ev.stopPropagation();
+            this.inputRef.current.focus();
             this.closeDropdown();
         }
 
@@ -249,16 +231,10 @@ define([
 
             return this.state.value.searchedValues.map(({label}) => {
                 return html`
-                <div className="-row" 
-                style=${{
-        padding: '4px',
-        cursor: 'pointer'
-
-    }}
-                onClick=${() => {this.doSelectValue(label);}}
-                > 
-                            ${label}
-                        </div>
+                <div className="-row -dropdown-item" 
+                    onClick=${() => {this.doSelectValue(label);}}> 
+                    ${label}
+                </div>
                 `;
             });
         }
@@ -325,9 +301,7 @@ define([
                             value=${this.state.inputValue}
                             placeholder=${this.props.placeholder}
                             onInput=${this.onInput.bind(this)}
-                            onKeyPress=${this.onKeyPress.bind(this)}
                             onKeyDown=${this.onKeyDown.bind(this)}
-                            onBlur=${this.onBlur.bind(this)}
                         />
                         ${this.renderCancelSearchButton()}
                         ${this.renderSearchButton()}