(core) Replace time zone selector with one based on the newer autocomplete.

Summary:
Flaky Dates test failures related to the use of JQuery autocomplete for time
zones, which wasn't working well.

This diff replaces that autocomplete (as well as a similar select box in
DocumentSettings) with our newer autocomplete, adding some select-box like
behavior.

Most of the behavior is factored out into ACSelect, which could be more
generally useful.

Adds an option to autocomplete to keep options ordered according to their
initial order.

Unrelated: fix up usage of MultiHolder in Drafts to avoid 'already disposed'
warnings.

Test Plan: Fixed several affected tests.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D2919

app/client/lib/ACIndex.ts

@@ -9,6 +9,7 @@
 
 import {localeCompare, nativeCompare, sortedIndex} from 'app/common/gutil';
 import {DomContents} from 'grainjs';
+import escapeRegExp = require("lodash/escapeRegExp");
 
 export interface ACItem {
   // This should be a trimmed lowercase version of the item's text. It may be an accessor.
@@ -67,7 +68,9 @@ export class ACIndexImpl<Item extends ACItem> implements ACIndex<Item> {
 
   // Creates an index for the given list of items.
   // The max number of items to suggest may be set using _maxResults (default is 50).
-  constructor(items: Item[], private _maxResults: number = 50) {
+  // If _keepOrder is true, best matches will be suggested in the order they occur in items,
+  // rather than order by best score.
+  constructor(items: Item[], private _maxResults: number = 50, private _keepOrder = false) {
     this._allItems = items.slice(0);
 
     // Collects [word, occurrence, position] tuples for all words in _allItems.
@@ -116,15 +119,20 @@ export class ACIndexImpl<Item extends ACItem> implements ACIndex<Item> {
       .sort((a, b) => nativeCompare(b[1], a[1]) || nativeCompare(a[0], b[0]))
       .slice(0, this._maxResults);
 
-    const items: Item[] = sortedMatches.map(([index, score]) => this._allItems[index]);
+    const itemIndices: number[] = sortedMatches.map(([index, score]) => index);
 
-    // Append enough non-matching items to reach maxResults.
-    for (let i = 0; i < this._allItems.length && items.length < this._maxResults; i++) {
+    // Append enough non-matching indices to reach maxResults.
+    for (let i = 0; i < this._allItems.length && itemIndices.length < this._maxResults; i++) {
       if (this._allItems[i].cleanText && !myMatches.has(i)) {
-        items.push(this._allItems[i]);
+        itemIndices.push(i);
       }
     }
 
+    if (this._keepOrder) {
+      itemIndices.sort(nativeCompare);
+    }
+    const items = itemIndices.map(index => this._allItems[index]);
+
     if (!cleanedSearchText) {
       // In this case we are just returning the first few items.
       return {items, highlightFunc: highlightNone, selectIndex: -1};
@@ -132,11 +140,11 @@ export class ACIndexImpl<Item extends ACItem> implements ACIndex<Item> {
 
     const highlightFunc = highlightMatches.bind(null, searchWords);
 
-    // The best match is the first item. If any word in the item actually starts with the search
-    // text, highlight it as a default selection. Otherwise, no item will be auto-selected.
-    let selectIndex = -1;
-    if (items.length > 0 && sortedMatches.length > 0 && startsWithText(items[0], cleanedSearchText)) {
-      selectIndex = 0;
+    // If we have a best match, and any word in it actually starts with the search text, report it
+    // as a default selection for highlighting. Otherwise, no item will be auto-selected.
+    let selectIndex = sortedMatches.length > 0 ? itemIndices.indexOf(sortedMatches[0][0]) : -1;
+    if (selectIndex >= 0 && !startsWithText(items[selectIndex], cleanedSearchText, searchWords)) {
+      selectIndex = -1;
     }
     return {items, highlightFunc, selectIndex};
   }
@@ -248,11 +256,13 @@ function findCommonPrefixLength(text1: string, text2: string): number {
 }
 
 /**
- * Checks whether `item` starts with `text`, or has any words that start with `text`.
+ * Checks whether `item` starts with `text`, or whether all words of text are prefixes of the
+ * words of `item`. (E.g. it would return true if item is "New York", and text is "ne yo".)
  */
-function startsWithText(item: ACItem, text: string): boolean {
+function startsWithText(item: ACItem, text: string, searchWords: string[]): boolean {
   if (item.cleanText.startsWith(text)) { return true; }
 
-  const words = item.cleanText.split(wordSepRegexp);
-  return words.some(w => w.startsWith(text));
+  const regexp = new RegExp(searchWords.map(w => `\\b` + escapeRegExp(w)).join('.*'));
+  const cleanText = item.cleanText.split(wordSepRegexp).join(' ');
+  return regexp.test(cleanText);
 }

app/client/lib/ACSelect.ts

@@ -0,0 +1,149 @@
+import {ACIndex, ACItem, buildHighlightedDom} from 'app/client/lib/ACIndex';
+import {Autocomplete, IAutocompleteOptions} from 'app/client/lib/autocomplete';
+import {colors} from "app/client/ui2018/cssVars";
+import {icon} from "app/client/ui2018/icons";
+import {menuCssClass} from 'app/client/ui2018/menus';
+import {dom, DomElementArg, Holder, IDisposableOwner, Observable, styled} from 'grainjs';
+
+export interface ACSelectItem extends ACItem {
+  value: string;
+  label: string;
+}
+
+/**
+ * Builds a text input with an autocomplete dropdown.
+ * Note that because it is currently only used in the right-side panel, it is designed to avoid
+ * keeping focus.
+ */
+export function buildACSelect(
+  owner: IDisposableOwner,
+  options: {
+    acIndex: ACIndex<ACSelectItem>,
+    valueObs: Observable<string>,
+    save: (value: string, item: ACSelectItem|undefined) => Promise<void>|void
+  },
+  ...args: DomElementArg[]
+) {
+  const {acIndex, valueObs, save} = options;
+  const acHolder = Holder.create<Autocomplete<ACSelectItem>>(owner);
+  let textInput: HTMLInputElement;
+
+  const isOpen = () => !acHolder.isEmpty();
+  const acOpen = () => acHolder.isEmpty() && Autocomplete.create(acHolder, textInput, acOptions);
+  const acClose = () => acHolder.clear();
+  const finish = () => { acClose(); textInput.blur(); };
+  const revert = () => { textInput.value = valueObs.get(); finish(); };
+  const commitOrRevert = async () => { (await commitIfValid()) || revert(); };
+  const openOrCommit = () => { isOpen() ? commitOrRevert().catch(() => {}) : acOpen(); };
+
+  const commitIfValid = async () => {
+    const item = acHolder.get()?.getSelectedItem();
+    if (item) {
+      textInput.value = item.value;
+    }
+    textInput.disabled = true;
+    try {
+      await save(textInput.value, item);
+      finish();
+      return true;
+    } catch (e) {
+      return false;
+    } finally {
+      textInput.disabled = false;
+    }
+  };
+
+  const onMouseDown = (ev: MouseEvent) => {
+    ev.preventDefault();    // Don't let it affect focus, since we focus/blur manually.
+    if (!isOpen()) { textInput.focus(); }
+    openOrCommit();
+  };
+
+  const acOptions: IAutocompleteOptions<ACSelectItem> = {
+    menuCssClass: `${menuCssClass} test-acselect-dropdown`,
+    search: async (term: string) => acIndex.search(term),
+    renderItem: (item, highlightFunc) =>
+      cssSelectItem(buildHighlightedDom(item.label, highlightFunc, cssMatchText)),
+    getItemText: (item) => item.value,
+    onClick: commitIfValid,
+  };
+
+  return cssSelectBtn(
+    textInput = cssInput({type: 'text'},
+      dom.prop('value', valueObs),
+      dom.on('focus', (ev, elem) => elem.select()),
+      dom.on('blur', commitOrRevert),
+      dom.onKeyDown({
+        Escape: revert,
+        Enter: openOrCommit,
+        ArrowDown: acOpen,
+        Tab: commitIfValid,
+      }),
+      dom.on('input', acOpen),
+    ),
+    dom.on('mousedown', onMouseDown),
+    cssIcon('Dropdown'),
+    ...args
+  );
+}
+
+const cssSelectBtn = styled('div', `
+  position: relative;
+  width: 100%;
+  height: 30px;
+  color: ${colors.dark};
+  --icon-color: ${colors.dark};
+`);
+
+const cssSelectItem = styled('li', `
+  display: block;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  outline: none;
+  padding: var(--weaseljs-menu-item-padding, 8px 24px);
+  cursor: pointer;
+
+  &.selected {
+    background-color: var(--weaseljs-selected-background-color, #5AC09C);
+    color:            var(--weaseljs-selected-color, white);
+  }
+`);
+
+const cssInput = styled('input', `
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  height: 100%;
+  width: 100%;
+  padding: 0 6px;
+  outline: none;
+  border: 1px solid ${colors.darkGrey};
+  border-radius: 3px;
+  cursor: pointer;
+  line-height: 16px;
+  cursor: pointer;
+
+  &:disabled {
+    color: grey;
+    background-color: initial;
+  }
+  &:focus {
+    cursor: initial;
+    outline: none;
+    box-shadow: 0px 0px 2px 2px #5E9ED6;
+  }
+`);
+
+const cssIcon = styled(icon, `
+  position: absolute;
+  right: 6px;
+  top: calc(50% - 8px);
+`);
+
+const cssMatchText = styled('span', `
+  color: ${colors.lightGreen};
+  .selected > & {
+    color: ${colors.lighterGreen};
+  }
+`);