diff --git a/packages/ui-default/components/autocomplete/autocomplete.page.styl b/packages/ui-default/components/autocomplete/autocomplete.page.styl index 676ca92cd..127da9ff5 100644 --- a/packages/ui-default/components/autocomplete/autocomplete.page.styl +++ b/packages/ui-default/components/autocomplete/autocomplete.page.styl @@ -53,7 +53,7 @@ white-space: nowrap text-overflow: ellipsis - &>svg + &>span.bp3-icon>svg font-size: 12px cursor: pointer padding: 4px @@ -78,35 +78,19 @@ &>div flex-grow: 1 - &>svg + &>span.bp3-icon>svg color: transparent &[aria-selected='true'] background-color: #fafafa font-weight: 600 - svg + &>span.bp3-icon>svg color: #1890ff &[data-focus='true'] background-color: #e6f7ff cursor: pointer - svg + &>span.bp3-icon>svg color: currentColor - -svg.autocomplete-icon - -webkit-user-select: none - -moz-user-select: none - -ms-user-select: none - user-select: none - width: 1em - height: 1em - display: inline-block - fill: currentColor - -webkit-flex-shrink: 0 - -ms-flex-negative: 0 - flex-shrink: 0 - -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms - transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms - font-size: 1.25rem diff --git a/packages/ui-default/components/autocomplete/components/ProblemSelectAutoComplete.jsx b/packages/ui-default/components/autocomplete/components/ProblemSelectAutoComplete.jsx index 9d5dc5581..bc49b0bd1 100644 --- a/packages/ui-default/components/autocomplete/components/ProblemSelectAutoComplete.jsx +++ b/packages/ui-default/components/autocomplete/components/ProblemSelectAutoComplete.jsx @@ -11,7 +11,7 @@ const ProblemSelectAutoComplete = forwardRef(function ProblemSelectAutoComplete( return (pdoc.pid ? `${pdoc.pid} ` : '') + pdoc.title; }; */ - const itemKey = (pdoc) => pdoc.docId || pdoc; + const itemKey = (pdoc) => `${pdoc.docId || pdoc}`; // force string const renderItem = (pdoc) => (
diff --git a/packages/ui-default/components/autocomplete/index.jsx b/packages/ui-default/components/autocomplete/index.jsx index 82d78f5d8..dc8d64fc5 100644 --- a/packages/ui-default/components/autocomplete/index.jsx +++ b/packages/ui-default/components/autocomplete/index.jsx @@ -20,6 +20,8 @@ export default class AutoComplete extends DOMAttachedObject { this.onChange = this.onChange.bind(this); this.container = document.createElement('div'); this.$dom.addClass('autocomplete-dummy').after(this.container); + // Note: use `setTimeout(fn, 0)` to ensure that code is executed after browser autofill + // also see https://stackoverflow.com/a/779785/13553984 setTimeout(() => this.attach(), 0); }