fixed placement of menus and interaction with input boxes.

1 files changed, 5 insertions, 1 deletions

diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index d9a27f355..aaa2e6096 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -374,7 +374,11 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         return (
             <div className="keys-dropdown">
                 <input className="keys-search" ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown}
-                    onChange={e => this.onChange(e.target.value)} onFocus={this.onFocus} onBlur={this.onBlur}></input>
+                    onChange={e => this.onChange(e.target.value)}
+                    onClick={(e) => {
+                        this._inputRef.current!.select();
+                        e.stopPropagation();
+                    }} onFocus={this.onFocus} onBlur={this.onBlur}></input>
                 <div className="keys-options-wrapper" onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
                     {this.renderOptions()}
                 </div>