feat: use Enter to select the first url item

Author: sheepzh

src/pages/app/components/Limit/LimitModify/Sop/Step2/SiteInput.tsx

@@ -5,8 +5,8 @@ import Flex from '@pages/components/Flex'
 import { selectAllSites } from '@service/site-service'
 import { cleanCond } from '@util/limit'
 import { extractHostname, isBrowserUrl } from '@util/pattern'
-import { ElMessage, ElSelectV2, ElText, type SelectV2Instance } from 'element-plus'
-import { computed, defineComponent, ref, type StyleValue } from 'vue'
+import { ElMessage, ElSelectV2, ElText, useNamespace, type SelectV2Instance } from 'element-plus'
+import { computed, defineComponent, onMounted, ref, type StyleValue } from 'vue'
 
 type Props = {
     onAdd: (url: string) => string | undefined
@@ -27,54 +27,80 @@ const fetchAllHosts = async () => {
     return Array.from(hostSet)
 }
 
-const useUrlSelect = () => {
+const useUrlSelect = ({ onAdd }: Props) => {
     const { data: allHosts } = useRequest(fetchAllHosts)
     const [input, onFilter] = useDebounceState('', 50)
     const inputUrl = computed(() => {
-        const inputVal = input.value
-        return inputVal ? cleanCond(inputVal) : undefined
+        const clean = cleanCond(input.value)
+        if (!clean) return {}
+        const slashIdx = clean.indexOf('/')
+        return slashIdx === -1 ? { full: clean } : { full: clean, domain: clean.substring(0, slashIdx) }
     })
 
     const options = computed(() => {
-        const urlVal = inputUrl.value
+        const { full, domain } = inputUrl.value
         const result: string[] = []
-        if (urlVal) {
-            result.push(urlVal)
-            allHosts.value?.forEach(host => host.includes(urlVal) && host !== urlVal && result.push(host))
+        if (full) {
+            result.push(full)
+            domain && result.push(domain)
+            allHosts.value?.forEach(host => host.includes(full) && host !== full && host !== domain && result.push(host))
         } else {
             allHosts.value?.forEach(h => result.push(h))
         }
         return result.map(value => ({ value, label: value }))
     })
 
-    return { options, onFilter }
-}
-
-const SiteInput = defineComponent<Props>(props => {
-    const { options, onFilter } = useUrlSelect()
-    const selectEl = ref<SelectV2Instance>()
+    const selectInst = ref<SelectV2Instance>()
 
     const warnAndFocus = (msg: string) => {
         ElMessage.warning(msg)
-        selectEl.value?.focus()
+        selectInst.value?.focus()
     }
 
-    const handleAdd = (url: string) => {
-        const errMsg = props.onAdd(url)
+    const onSelected = (url: string) => {
+        const errMsg = onAdd(url)
         if (errMsg) {
             return warnAndFocus(errMsg)
         } else {
-            selectEl.value?.handleClear()
+            selectInst.value?.handleClear()
         }
     }
 
+    const selectNs = useNamespace('select')
+
+    onMounted(() => {
+        const el = (selectInst.value?.$el as HTMLDivElement)
+        if (!el) return
+        const input = el.querySelector('input')
+        input?.addEventListener('keyup', ev => {
+            if (ev.code !== 'Enter') return
+            console.log(`.${selectNs.be('dropdown', 'item')}.is-hovering`)
+            const hovered = el.querySelector(`.${selectNs.be('dropdown', 'item')}.is-hovering`)
+            const first = options.value[0]?.value
+            if (!hovered && first) {
+                onSelected(first)
+                ev.stopImmediatePropagation()
+            }
+        })
+    })
+
+    return {
+        options, onFilter, onSelected,
+        selectInst,
+    }
+}
+
+const SiteInput = defineComponent<Props>(props => {
+    const { options, onFilter, onSelected, selectInst } = useUrlSelect(props)
+
     return () => (
         <Flex width="100%" column gap={5}>
             <ElSelectV2
                 id='site-input' // used for e2e tests
-                onChange={handleAdd}
-                ref={selectEl} options={options.value}
+                onChange={onSelected}
+                ref={selectInst} options={options.value}
                 filterable filterMethod={onFilter}
+                teleported={false} // not teleported, need to find hovered item
                 placeholder="e.g. www.demo.com, *.demo.com, demo.com/blog/*, demo.com/**, +www.demo.com/blog/list"
             />
             <ElText style={{ textAlign: 'start', width: '100%', paddingInlineStart: '10px' } satisfies StyleValue}>