querysub 0.2.0

package/src/library-components/Input.tsx

@@ -0,0 +1,334 @@
+import preact from "preact";
+import { css } from "typesafecss";
+import { Querysub } from "../4-querysub/Querysub";
+import { qreact } from "../4-dom/qreact";
+import { proxyWatcher } from "../2-proxy/PathValueProxyWatcher";
+
+// TODO: Autogrow mode while typing
+
+// NOTE: "value" is optional. If you don't pass "value", we will preserve the value.
+//  This is useful for inputs which you want to run an action on, such as "add new item",
+//      as it allows you to remove a local state value to cache the value, by just
+//      doing the add on "onChangeValue".
+export type InputProps = (
+    preact.JSX.HTMLAttributes<HTMLInputElement>
+    & {
+        flavor?: "large" | "small";
+        focusOnMount?: boolean;
+        textarea?: boolean;
+        /** Update on key stroke, not on blur (just does onInput = onChange, as onInput already does this) */
+        hot?: boolean;
+        /** Updates arrow keys with modifier behavior to use larger numbers, instead of decimals. */
+        integer?: boolean;
+        inputRef?: (x: HTMLInputElement | null) => void;
+        /** Don't blur on enter key */
+        noEnterKeyBlur?: boolean;
+        noFocusSelect?: boolean;
+        inputKey?: string;
+        fillWidth?: boolean;
+
+        /** By default, we don't accept value updates when focused. This prevents the user's
+         *      typing from being interrupted by a value update. However, this flag will
+         *      stop that behavior, allowing the input to update at any time
+         *      - This can be useful when the value is intentionally being updated by code,
+         *          while the input is focused.
+         */
+        alwaysUseLatestValueWhenFocused?: boolean;
+
+        // NOTE: onChangeValue is called onChange, which is generally on blur.
+        // NOTE: We also trigger onChange (and onChangeValue) whenever
+        //      e.ctrlKey && (e.code.startsWith("Key") || e.code === "Enter") || e.code === "Enter" && e.shiftKey
+        //  This is because ctrl usually means a hotkey, and hotkeys usually want committed values.
+        onChangeValue?: (value: string) => void;
+    }
+);
+
+export class Input extends qreact.Component<InputProps> {
+    state = {};
+    onFocusText = "";
+    firstFocus = true;
+
+    elem: HTMLInputElement | null = null;
+    lastValue: unknown = null;
+    lastChecked: unknown = null;
+
+    render() {
+        let flavorOverrides: preact.JSX.CSSProperties = {};
+        const { flavor, textarea, hot, inputKey, fillWidth, ...nativeProps } = this.props;
+        let props = { ...nativeProps };
+        // Convert undefined to "" (unless it is really a checked component)
+        if (!("checked" in props) && props.value === undefined) {
+            props.value = "";
+        }
+
+        if (props.onChangeValue) {
+            let baseOnChange = props.onChange;
+            props.onChange = e => {
+                baseOnChange?.(e);
+                props.onChangeValue?.(e.currentTarget.value);
+            };
+        }
+        if (flavor === "large") {
+            flavorOverrides = {
+                fontSize: 18,
+                padding: "10px 15px",
+            };
+            if (props.type === "checkbox") {
+                flavorOverrides.width = 16;
+                flavorOverrides.height = 16;
+            }
+        }
+        if (flavor === "small") {
+            flavorOverrides = {
+                fontSize: 12,
+                padding: "5px 10px",
+            };
+        }
+
+        let fontSize = flavorOverrides.fontSize;
+        delete flavorOverrides.fontSize;
+
+        let attributes: preact.JSX.HTMLAttributes<HTMLInputElement> = {
+            ...nativeProps,
+            key: inputKey || "input",
+            ref: x => {
+                if (x) {
+                    this.elem = x;
+                }
+                if (x && props.focusOnMount && this.firstFocus) {
+                    this.firstFocus = false;
+                    setTimeout(() => {
+                        x.focus();
+                        // I'm not sure why, but this initial focus isn't trigger onFocus, so we have to
+                        //      trigger it ourselves
+                        if (!props.noFocusSelect) {
+                            x.select();
+                        }
+                    }, 0);
+                }
+                let ref = props.inputRef || props.ref;
+                if (typeof ref === "function") {
+                    ref(x);
+                }
+            },
+            class: undefined,
+            className: (
+                (props.className || props.class || " ")
+                + css.border("1px solid hsl(0, 0%, 50%)", "soft")
+                    .background("hsl(0, 0%, 7%)", "soft")
+                    .color("hsl(0, 0%, 95%)", "soft")
+                    .display("flex", "soft")
+                    .outline("3px solid hsl(204, 100%, 50%)", "focus", "soft")
+                + (fillWidth && css.fillWidth)
+                + (fontSize && css.fontSize(fontSize, "soft") || "")
+            ),
+            style: {
+                ...flavorOverrides,
+                ...props.style as any,
+            },
+            onFocus: e => {
+                this.onFocusText = e.currentTarget.value;
+                if (!props.noFocusSelect) {
+                    e.currentTarget.select();
+                }
+                props.onFocus?.(e);
+            },
+            onBlur: e => {
+                props.onBlur?.(e);
+                // NOTE: We were previous trying to fix a bug where the prop value would update
+                //  before blur. However... most of the time it updates after blur, and resetting
+                //  this just results in the blur callback being given a stale prop, which breaks things
+                //e.currentTarget.value = String(this.props.value ?? "");
+                if (
+                    e.currentTarget.value === this.lastValue
+                    && e.currentTarget.checked === this.lastChecked
+                    // If we are in a resync loop the values SHOULD be the same, so don't return
+                    && !proxyWatcher.getTriggeredWatcherMaybeUndefined()?.countSinceLastFullSync
+                ) {
+                    return;
+                }
+                // Only set our values on the first trigger, not within the resync loop
+                if (!proxyWatcher.getTriggeredWatcherMaybeUndefined()?.countSinceLastFullSync) {
+                    this.lastValue = e.currentTarget.value;
+                    this.lastChecked = e.currentTarget.checked;
+                }
+                let callback = props.onInput || props.onChange;
+                callback?.(e);
+            },
+            onChange: e => {
+                if (
+                    e.currentTarget.value === this.lastValue
+                    && e.currentTarget.checked === this.lastChecked
+                    && !proxyWatcher.getTriggeredWatcherMaybeUndefined()?.countSinceLastFullSync
+                ) {
+                    return;
+                }
+                if (!proxyWatcher.getTriggeredWatcherMaybeUndefined()?.countSinceLastFullSync) {
+                    this.lastValue = e.currentTarget.value;
+                    this.lastChecked = e.currentTarget.checked;
+                }
+                props.onChange?.(e);
+            },
+            onKeyDown: e => {
+                if (e.defaultPrevented) return;
+                if (textarea && e.code === "Tab") {
+                    e.preventDefault();
+                    // Inject 4 spaces into the current position
+                    let elem = e.currentTarget;
+                    let value = elem.value;
+                    let start = elem.selectionStart ?? elem.value.length;
+                    let end = elem.selectionEnd ?? elem.value.length;
+                    elem.value = value.slice(0, start) + "    " + value.slice(end);
+                    elem.selectionStart = elem.selectionEnd = start + 4;
+                    return;
+                }
+                props.onKeyDown?.(e);
+                if (e.code === "Enter" && e.ctrlKey) {
+                    e.currentTarget.blur();
+                }
+                if (this.elem && props.type === "number") {
+                    let delta = 0;
+                    let magnitude = 1;
+                    if (e.shiftKey) {
+                        if (props.integer) {
+                            magnitude = 10;
+                        } else {
+                            magnitude = 0.1;
+                        }
+                    }
+                    if (e.code === "ArrowUp") {
+                        delta = magnitude;
+                    } else if (e.code === "ArrowDown") {
+                        delta = -magnitude;
+                    }
+                    if (delta !== 0) {
+                        e.preventDefault();
+                        let newValue = Math.round(((+this.elem.value || 0) + delta) * 100) / 100;
+                        e.currentTarget.value = newValue.toString();
+                        let callback = props.onInput;
+                        if (!callback && hot) {
+                            callback = props.onChange;
+                        }
+                        callback?.(e as unknown as preact.JSX.TargetedInputEvent<HTMLInputElement>);
+                    }
+                }
+                let { noEnterKeyBlur, onInput, onChange } = props;
+                // Detach from the synced function, to prevent double calls. This is important, as apparently .blur()
+                //  synchronously triggers onChange, BUT, only if the input is changing the first time. Which means
+                //  if this function reruns, it won't trigger the change again. Detaching it causes any triggered
+                //  functions to become root synced functions, which will allow them to correctly run the sync loop.
+                void Promise.resolve().finally(() => {
+                    if (e.code === "Escape") {
+                        let changed = e.currentTarget.value !== this.onFocusText;
+                        e.currentTarget.value = this.onFocusText;
+                        if (onInput) {
+                            Querysub.serviceWriteDetached(() => {
+                                onInput?.(e as unknown as preact.JSX.TargetedInputEvent<HTMLInputElement>);
+                            });
+                        } else if (changed) {
+                            if (onChange) {
+                                Querysub.serviceWriteDetached(() => {
+                                    onChange?.(e);
+                                });
+                            }
+                        }
+                        e.currentTarget.blur();
+                    }
+                    if (!noEnterKeyBlur && e.code === "Enter" && (!textarea || e.shiftKey || e.ctrlKey)) {
+                        e.currentTarget.blur();
+                    } else if (
+                        e.ctrlKey && (
+                            // No need to commit on on paste or cut. If they want to commit, they can commit like they usually
+                            //  do. This shortcut only marginally affects a few workflows, and has the potential to break many others,
+                            //  so... let's not.
+                            // // Pasting and cutting might not mean commit, but... they probably mean for it to...
+                            // e.code === "KeyV" ||
+                            // e.code === "KeyX" ||
+
+                            // Ctrl+enter means "commit"
+                            e.code === "Enter"
+                        )
+                        // Shift+enter means "commit"
+                        || e.shiftKey && e.code === "Enter"
+                    ) {
+                        Querysub.serviceWriteDetached(() => {
+                            onChange?.(e);
+                        });
+                    }
+                });
+            }
+        };
+
+        if ("checked" in props) {
+            {
+                this.lastChecked = !!props.checked;
+            }
+        } else {
+            let elem = this.elem;
+            let newValue = props.value;
+            if (elem && this.elem === document.activeElement && !this.props.alwaysUseLatestValueWhenFocused) {
+                newValue = elem.value;
+            }
+            attributes.value = newValue;
+            {
+                this.lastValue = String(props.value);
+            }
+        }
+
+
+        if (attributes.type === "number") {
+            // Fix stuff like 55.00000000000001
+            let value = attributes.value;
+            if (typeof value === "number") {
+                value = niceNumberStringify(value);
+            }
+        }
+
+        // We do number handling ourselves
+        if (attributes["type"] === "number") {
+            delete attributes["type"];
+        }
+
+        if (hot) {
+            attributes.onInput = props.onChange;
+        }
+        if (textarea) {
+            return <textarea {...attributes as any} />;
+        } else {
+            return <input {...attributes} />;
+        }
+    }
+}
+
+
+function niceNumberStringify(valueIn: number) {
+    if (Math.abs(valueIn) < 0.0000000001) {
+        return "0";
+    }
+    let value = valueIn.toString();
+    // TODO: Do this MUCH better...
+    if (value.slice(0, -1).endsWith("00000000000")) {
+        value = value.slice(0, -1);
+        while (value.endsWith("0")) {
+            value = value.slice(0, -1);
+        }
+        if (value.endsWith(".")) {
+            value = value.slice(0, -1);
+        }
+        return value;
+    }
+    if (value.slice(0, -1).endsWith("9999999999")) {
+        value = value.slice(0, -1);
+        while (value.endsWith("9")) {
+            value = value.slice(0, -1);
+        }
+        if (value.endsWith(".")) {
+            value = value.slice(0, -1);
+        }
+        // NOTE: Interestingly enough... because we remove all trailing 9s, it means if the last number is not 9,
+        //  so... we can do this hack to round up
+        value = value.slice(0, -1) + (parseInt(value.slice(-1)) + 1);
+        return value;
+    }
+    return value;
+}

package/src/library-components/InputLabel.tsx

@@ -0,0 +1,198 @@
+import preact from "preact";
+import { Input, InputProps } from "./Input";
+import { css } from "typesafecss";
+import { URLParam } from "./URLParam";
+import { lazy } from "socket-function/src/caching";
+import { setCSS } from "../4-dom/css";
+import { qreact } from "../4-dom/qreact";
+import { formatDateTime } from "socket-function/src/formatting/format";
+
+
+export type InputLabelProps = Omit<InputProps, "label" | "title"> & {
+    label?: preact.ComponentChild;
+    number?: boolean;
+    /** A number, AND, an integer. Changes behavior arrow arrow keys as well */
+    integer?: boolean;
+    checkbox?: boolean;
+    isDatetime?: boolean;
+    // Show text and a pencil, only showing the input on click
+    edit?: boolean;
+    editValue?: preact.ComponentChild;
+    outerClass?: string;
+    maxDecimals?: number;
+    percent?: boolean;
+    editClass?: string;
+
+    fontSize?: number;
+
+    tooltip?: string;
+
+    fillWidth?: boolean;
+};
+
+function roundToDecimals(value: number, decimals: number) {
+    return Math.round(value * 10 ** decimals) / 10 ** decimals;
+}
+
+setCSS(module, `
+.trigger-hover:not(:hover) .show-on-hover {
+    display: none;
+}
+`);
+
+export class InputLabel extends qreact.Component<InputLabelProps> {
+    state = { editting: false };
+    render() {
+        let props = { ...this.props };
+        let label = props.label || this.props.children;
+        (this.props as any).title = this.props.tooltip;
+        if (props.fontSize !== undefined) {
+            props.style = { ...props.style as any, fontSize: props.fontSize };
+        }
+        if (props.integer) {
+            props.number = true;
+        }
+        if (props.number) {
+            props.type = "number";
+        }
+        if (props.checkbox) {
+            props.type = "checkbox";
+        }
+        if (props.percent) {
+            props.value = (Number(props.value) || 0) * 100;
+            const baseOnChange = props.onChange;
+            if (baseOnChange) {
+                props.onChange = e => {
+                    let value = String(+e.currentTarget.value / 100);
+                    baseOnChange({ currentTarget: { value } } as any);
+                };
+            }
+            props.maxDecimals = props.maxDecimals ?? 2;
+            props.number = props.number ?? true;
+            props.type = "number";
+        }
+        if (props.isDatetime) {
+            function formatDateTimeForInput(value: number) {
+                value = Number(value) || 0;
+                value -= new Date(value).getTimezoneOffset() * 60 * 1000;
+                return new Date(value).toISOString().slice(0, -1);
+            }
+            let time = Number(props.value || 0);
+            props.value = formatDateTimeForInput(time);
+            props.editValue = formatDateTime(time);
+            props.type = "datetime-local";
+            const baseOnChangeValue = props.onChangeValue;
+            if (baseOnChangeValue) {
+                props.onChangeValue = newValue => {
+                    newValue = new Date(newValue).getTime() as any;
+                    baseOnChangeValue(newValue);
+                };
+            }
+            const baseOnChange = props.onChange;
+            if (baseOnChange) {
+                props.onChange = e => {
+                    let value = new Date(e.currentTarget.value).getTime();
+                    baseOnChange({ currentTarget: { value } } as any);
+                };
+            }
+
+            // NOTE: Hook up onChanges with onBlur, as datetime-local triggers
+            //      changes more frequently than regular inputs.
+            if (!props.hot) {
+                let onChangeValue = props.onChangeValue;
+                let onChange = props.onChange;
+                props.onBlur = (e) => {
+                    onChangeValue?.(e.currentTarget.value);
+                    onChange?.(e);
+                };
+                props.onChangeValue = undefined;
+                props.onChange = undefined;
+            }
+        }
+        let maxDecimals = props.maxDecimals;
+        if (typeof maxDecimals === "number") {
+            props.value = roundToDecimals(Number(props.value), maxDecimals);
+        }
+        let style = { ...props.style as any };
+        if (props.type === "number") {
+            let fontSize = props.fontSize ?? 12;
+            style.width = 40 + String(props.value).length * (fontSize * 0.75);
+        }
+        let onClick: (() => void) | undefined;
+        if (props.edit) {
+            let baseBlur = props.onBlur;
+            props.onBlur = e => {
+                this.state.editting = false;
+                baseBlur?.(e);
+            };
+            onClick = () => {
+                this.state.editting = true;
+            };
+            // Default focus on mount, as editting it is the only reason to click on it.
+            props.focusOnMount = props.focusOnMount ?? true;
+        }
+        let input = <Input
+            {...props}
+            label={String(label)}
+            style={style}
+        />;
+        if (props.edit && !this.state.editting) {
+            input = <span class={css.hbox(2) + " trigger-hover"}>
+                <span class={props.editClass}>
+                    {props.editValue ?? props.value}
+                </span>
+                <span class={css.opacity(0.1).opacity(1, "hover")}>
+                    {pencilSVG()}
+                </span>
+            </span>;
+        }
+        return (
+            <label onClick={onClick} class={
+                css.hbox(8).button.relative
+                + " trigger-hover "
+                + props.outerClass
+                + (props.flavor === "large" && css.fontSize(18, "soft"))
+                + (props.fillWidth && css.fillWidth)
+            }>
+                <div
+                    class={
+                        "show-on-hover "
+                        + css.hsla(0, 0, 0, 0.2)
+                            .absolute.pos(-8, -2).size("calc(100% + 16px)" as "100%", "calc(100% + 4px)" as "100%")
+                            .zIndex(-1)
+                            .pointerEvents("none")
+                    }
+                />
+                {label && <span class={css.fontWeight("bold").flexShrink0}>{label}</span>}
+                {input}
+            </label>
+        );
+    }
+}
+
+const pencilSVG = lazy(() => {
+    const src = "data:image/svg+xml;base64," + Buffer.from(`
+    <svg width="24" height="24" viewBox="-1 1 23 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5.98012 19.3734L8.60809 18.7164C8.62428 18.7124 8.64043 18.7084 8.65654 18.7044C8.87531 18.65 9.08562 18.5978 9.27707 18.4894C9.46852 18.381 9.62153 18.2275 9.7807 18.0679C9.79242 18.0561 9.80418 18.0444 9.81598 18.0325L17.0101 10.8385L17.0101 10.8385L17.0369 10.8117C17.3472 10.5014 17.6215 10.2272 17.8128 9.97638C18.0202 9.70457 18.1858 9.39104 18.1858 9C18.1858 8.60896 18.0202 8.29543 17.8128 8.02361C17.6215 7.77285 17.3472 7.49863 17.0369 7.18835L17.01 7.16152L16.8385 6.98995L16.8117 6.96314C16.5014 6.6528 16.2272 6.37853 15.9764 6.1872C15.7046 5.97981 15.391 5.81421 15 5.81421C14.609 5.81421 14.2954 5.97981 14.0236 6.1872C13.7729 6.37853 13.4986 6.65278 13.1884 6.96311L13.1615 6.98995L5.96745 14.184C5.95565 14.1958 5.94386 14.2076 5.93211 14.2193C5.77249 14.3785 5.61904 14.5315 5.51064 14.7229C5.40225 14.9144 5.34999 15.1247 5.29562 15.3435C5.29162 15.3596 5.28761 15.3757 5.28356 15.3919L4.62003 18.046C4.61762 18.0557 4.61518 18.0654 4.61272 18.0752C4.57411 18.2293 4.53044 18.4035 4.51593 18.5518C4.49978 18.7169 4.50127 19.0162 4.74255 19.2574C4.98383 19.4987 5.28307 19.5002 5.44819 19.4841C5.59646 19.4696 5.77072 19.4259 5.92479 19.3873C5.9346 19.3848 5.94433 19.3824 5.95396 19.38L5.95397 19.38L5.9801 19.3734L5.98012 19.3734Z" stroke="#33363F" stroke-width="1.2" fill="hsl(330, 50%, 60%)" />
+        <path d="M12.5 7.5L5.92819 14.0718C5.71566 14.2843 5.60939 14.3906 5.53953 14.5212C5.46966 14.6517 5.44019 14.7991 5.38124 15.0938L4.64709 18.7646C4.58057 19.0972 4.5473 19.2635 4.64191 19.3581C4.73652 19.4527 4.90283 19.4194 5.23544 19.3529L8.90621 18.6188C9.20093 18.5598 9.3483 18.5303 9.47885 18.4605C9.60939 18.3906 9.71566 18.2843 9.92819 18.0718L16.5 11.5L12.5 7.5Z" fill="hsl(45, 100%, 50%)" />
+        <path d="M12.5 7.5L16.5 11.5" stroke="#33363F" stroke-width="1.2" />
+    </svg>
+    `).toString("base64");
+    return <img draggable={false} src={src} />;
+});
+
+export class InputLabelURL extends qreact.Component<InputLabelProps & {
+    url: URLParam;
+    valueDefault?: unknown;
+}> {
+    render() {
+        let props = { ...this.props };
+        if (props.type === "number" || props.number) {
+            return <InputLabel {...props} value={Number(props.url.value ?? this.props.valueDefault)} onChange={e => { props.url.value = +e.currentTarget.value; props.onChange?.(e); }} />;
+        } else if (props.type === "checkbox" || this.props.checkbox) {
+            return <InputLabel {...props} checked={Boolean(props.url.value ?? this.props.valueDefault)} onChange={e => { props.url.value = e.currentTarget.checked; props.onChange?.(e); }} />;
+        } else {
+            return <InputLabel {...props} value={String(props.url.value ?? this.props.valueDefault)} onChange={e => { props.url.value = e.currentTarget.value; props.onChange?.(e); }} />;
+        }
+    }
+}

package/src/library-components/InputPicker.tsx

@@ -0,0 +1,125 @@
+import preact from "preact"; import { qreact } from "../../src/4-dom/qreact";
+import { Button } from "../../src/library-components/Button";
+import { Input } from "../../src/library-components/Input";
+import { isDefined } from "../../src/misc";
+import { sort } from "socket-function/src/misc";
+import { css } from "typesafecss";
+import { Querysub } from "../../src/4-querysub/Querysub";
+import { greenButton, yellowButton } from "./colors";
+
+export type InputOption<T> = {
+    value: T;
+    // Defaults to String(value)
+    label?: preact.ComponentChild;
+    // Defaults to typeof label === "string" ? label : String(value)
+    matchText?: string;
+};
+export type FullInputOption<T> = {
+    value: T;
+    label: preact.ComponentChild;
+    matchText: string;
+};
+/** Allow selecting multiple items from a set of values. */
+export class InputPicker<T> extends qreact.Component<{
+    label?: preact.ComponentChild;
+    picked: T[];
+    options: InputOption<T>[];
+    addPicked: (value: T) => void;
+    removePicked: (value: T) => void;
+    allowNonOptions?: boolean;
+}> {
+    state = {
+        pendingText: "",
+        focused: false,
+    };
+    render() {
+        // Input, and beside it the picked values
+        let resolvedOptions = this.props.options.map(option => {
+            let value = option.value;
+            let label = option.label ?? String(value);
+            let matchText = option.matchText ?? (typeof label === "string" ? label : String(value));
+            return { value, label, matchText };
+        });
+        let optionLookup = new Map(resolvedOptions.map((option) => [option.value, option]));
+        let pickedOptions = this.props.picked.map(x => optionLookup.get(x) || { value: x, label: String(x), matchText: String(x) });
+        let pendingMatches: FullInputOption<T>[] = [];
+        let pendingTextFull = this.state.pendingText;
+        let pendingText = pendingTextFull.trim().toLowerCase();
+        if (pendingText) {
+            pendingMatches = resolvedOptions.filter(option => option.matchText.toLowerCase().includes(pendingText));
+            sort(pendingMatches, x =>
+                x.matchText.startsWith(pendingTextFull) && -10
+                || x.matchText.startsWith(pendingText) && -9
+                || x.matchText.toLowerCase().startsWith(pendingTextFull) && -8
+                || x.matchText.toLowerCase().startsWith(pendingText) && -7
+                || x.matchText.length
+            );
+        } else if (this.state.focused) {
+            pendingMatches = resolvedOptions;
+        }
+        let extra = pendingMatches.length;
+        pendingMatches = pendingMatches.slice(0, 10);
+        extra -= pendingMatches.length;
+        return (
+            <div class={css.hbox(10).alignItems("start")}>
+                {this.props.label}
+                <Input
+                    value={this.state.pendingText}
+                    hot
+                    alwaysUseLatestValueWhenFocused
+                    onChangeValue={(x) => this.state.pendingText = x}
+                    onFocus={() => this.state.focused = true}
+                    onBlur={() => {
+                        this.state.focused = false;
+                        this.state.pendingText = "";
+                    }}
+                    onKeyDown={e => {
+                        // On tab, add first in pendingMatches
+                        if (e.key === "Tab") {
+                            e.preventDefault();
+                            if (pendingMatches.length > 0) {
+                                this.props.addPicked(pendingMatches[0].value);
+                                this.state.pendingText = "";
+                            }
+                        }
+                    }}
+                />
+                {pendingMatches.length > 0 && (
+                    <div class={css.hbox(4).wrap}>
+                        {pendingMatches.map((option) => (
+                            <Button
+                                key={`add-${option.matchText}`}
+                                class={css.hbox(5).button + greenButton}
+                                // On mouse down, so we can add picked BEFORE we blur (otherwise
+                                //  this button disappears before it can be clicked)
+                                onMouseDown={() => {
+                                    this.props.addPicked(option.value);
+                                }}
+                            >
+                                + {option.label}
+                            </Button>
+                        ))}
+                        {extra > 0 && (
+                            <Button class={css.hbox(5).button} disabled>
+                                + {extra} more...
+                            </Button>
+                        )}
+                    </div>
+                )}
+                <div class={css.hbox(4).wrap}>
+                    {pickedOptions.map((option) => (
+                        <Button
+                            key={`remove-${option.matchText}`}
+                            class={css.hbox(5).button + yellowButton}
+                            onMouseDown={() => {
+                                this.props.removePicked(option.value);
+                            }}
+                        >
+                            - {option.label}
+                        </Button>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+}