It works!

src/TA.tsx

@@ -1,4 +1,4 @@
-import {ReactNode, useCallback, useState} from "react";
+import {ChangeEventHandler, KeyboardEventHandler, ReactNode, useCallback, useEffect, useRef, useState} from "react";
 import AsyncSelect from "react-select/async";
 import {FixedSizeList as List} from "react-window";
 import Select, {createFilter, MenuListProps} from "react-select";
@@ -35,41 +35,6 @@ function MenuList(props: MenuListProps) {
     </List>);
 }
 
-const TestSelect = (vendorOptions: any) => {
-    const options: {
-        value: string,
-        label: string
-    }[] = [];
-    for (let i = 0; i < vendorOptions["vendorOptions"].length; i = i + 1) {
-        options.push({
-            value: vendorOptions["vendorOptions"][i],
-            label: `${vendorOptions["vendorOptions"][i]}`
-        });
-    }
-
-    const loadOptions = (_inputValue: unknown, callback: (options: {
-        value: string,
-        label: string
-    }[]) => void) => {
-        setTimeout(() => {
-            callback(options);
-        }, 1000);
-    };
-
-    const TestSelectComponent = () => {
-        return (
-            <div className="testDropdown">
-                <AsyncSelect components={{MenuList}} cacheOptions defaultOptions loadOptions={loadOptions}
-                             filterOption={createFilter({ignoreAccents: false})}/>
-            </div>
-        )
-    }
-
-    return (
-        <TestSelectComponent/>
-    )
-}
-
 interface Option {
     label: string,
     value: string,
@@ -118,13 +83,7 @@ export function LargeSelect() {
             {selected && <div className={"mt-2"}>
                 {selected.data.aliases?.map(alias => (
                     <div className="py-1">
-                        <span className={"rounded-md p-1 hover:bg-slate-100"}>
-                            <span className={"text-slate-300 p-0.5"}>[[</span>
-                            <span>{selected.label}</span>
-                            <span className={"text-slate-300 p-0.5"}>|</span>
-                            <span>{alias}</span>
-                            <span className={"text-slate-300 p-0.5"}>]]</span>
-                        </span>
+                        <Alias original={selected.label} alias={alias}/>
                     </div>
                 ))}
 
@@ -134,7 +93,7 @@ export function LargeSelect() {
                         <span>{selected.label}</span>
                         <span className={"text-slate-300 p-0.5"}>|</span>
                         <span>
-                            <input className={"border-none m-0 p-0 max-width-fit"}/>
+                            <CustomAliasField selected={selected}/>
                         </span>
                         <span className={"text-slate-300 p-0.5"}>]]</span>
                     </span>
@@ -144,5 +103,68 @@ export function LargeSelect() {
     )
 }
 
+function CustomAliasField({selected}: {
+    selected: Option
+}) {
+    const [content, setContent] = useState('');
+    const [width, setWidth] = useState<any>(0);
+    const span = useRef<HTMLSpanElement>(null);
 
-export default TestSelect
+    // Reset when selection changes
+    useEffect(() => {
+        setContent('');
+    }, [selected.value]);
+
+    // Resize on change of content
+    useEffect(() => {
+        setWidth(span.current!.offsetWidth);
+        // setWidth(content.length + 'ch');
+    }, [content]);
+
+    const changeHandler: ChangeEventHandler<HTMLInputElement> = useCallback(evt => {
+        setContent(evt.target.value);
+    }, []);
+
+    const onCustomElementKeyDown: KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
+        if (e.key == 'Enter') {
+            navigator.clipboard.writeText(`[[${selected!.label}|${content}]]`);
+            (e.target as HTMLInputElement).blur()
+        }
+    }, [selected.value, selected.label, content]);
+
+    return (
+        <span>
+            <span style={{
+                position: 'absolute',
+                opacity: 0,
+                zIndex: -100,
+                whiteSpace: 'pre',
+            }} ref={span}>{content}</span>
+            <input
+                className={"border-none p-0 px-1"}
+                type="text" style={{width: `calc(${width}px + 0.25rem)`}} autoFocus onChange={changeHandler} onKeyDown={onCustomElementKeyDown}/>
+        </span>
+    );
+}
+
+function Alias({
+                   original,
+                   alias
+               }: {
+    original: string,
+    alias: string
+}) {
+    const onClick = useCallback(() => {
+        navigator.clipboard.writeText(`[[${original}|${alias}]]`)
+    }, [original, alias]);
+
+    return (
+        <span className={"rounded-md p-1 hover:bg-slate-100"} onClick={onClick}>
+            <span className={"text-slate-300 p-0.5"}>[[</span>
+            <span>{original}</span>
+            <span className={"text-slate-300 p-0.5"}>|</span>
+            <span>{alias}</span>
+            <span className={"text-slate-300 p-0.5"}>]]</span>
+        </span>
+    );
+}