fix(pro:search): segment input mousedown doesn't change selection (#1612

)
IDuxFE · Jul 26, 2023 · eec8158 · eec8158
1 parent 62d53e7
commit eec8158
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git a/packages/pro/search/src/components/segment/Segment.tsx b/packages/pro/search/src/components/segment/Segment.tsx
@@ -98,21 +98,14 @@ export default defineComponent({
       watch(
         isActive,
         active => {
-          let selectionStart = -1
           nextTick(() => {
             if (active) {
               segmentInputRef.value?.getInputElement().focus()
-              if (props.input) {
-                selectionStart = props.input.length
-              }
-            } else {
-              selectionStart = 0
             }
 
-            if (selectionStart !== -1) {
-              updateSelectionStart(selectionStart)
-              handleSegmentSelect(props.segment.name, selectionStart)
-            }
+            updateSelectionStart(
+              (props.selectionStart ?? -1) === -1 ? (active ? props.input?.length ?? 0 : 0) : props.selectionStart ?? 0,
+            )
           })
         },
         { immediate: true },
@@ -151,11 +144,8 @@ export default defineComponent({
       setOverlayOpened(false)
       handleSegmentCancel(props.segment.name)
     }
-    const handleMouseDown = (evt: MouseEvent) => {
-      evt.stopImmediatePropagation()
-    }
 
-    const { handleInput, handleFocus, handleKeyDown, setPanelOnKeyDown } = useInputEvents(
+    const { handleInput, handleFocus, handleKeyDown, handleMouseDown, setPanelOnKeyDown } = useInputEvents(
       props,
       context,
       segmentInputRef,
@@ -241,6 +231,7 @@ interface InputEventHandlers {
   handleInput: (input: string) => void
   handleFocus: (evt: FocusEvent) => void
   handleKeyDown: (evt: KeyboardEvent) => void
+  handleMouseDown: (evt: MouseEvent) => void
   setPanelOnKeyDown: (onKeyDown: ((evt: KeyboardEvent) => boolean) | undefined) => void
 }
 
@@ -285,6 +276,11 @@ function useInputEvents(
     setOverlayOpened(true)
     setSelectionStart()
   }
+  const handleMouseDown = (evt: MouseEvent) => {
+    evt.stopImmediatePropagation()
+    setSelectionStart()
+  }
+
   const handleKeyDown = (evt: KeyboardEvent) => {
     evt.stopPropagation()
     if (overlayOpened.value && panelOnKeyDown.value && !panelOnKeyDown.value(evt)) {
@@ -340,6 +336,7 @@ function useInputEvents(
     handleInput,
     handleFocus,
     handleKeyDown,
+    handleMouseDown,
     setPanelOnKeyDown,
   }
 }
diff --git a/packages/pro/search/src/composables/useActiveSegment.ts b/packages/pro/search/src/composables/useActiveSegment.ts
@@ -81,10 +81,11 @@ export function useActiveSegment(
     }
 
     let targetIndex = activeSegmentIndex.value + offset
+
     while (
-      !flattenedSegments.value[targetIndex].segmentVisible &&
       targetIndex > 0 &&
-      targetIndex < flattenedSegments.value.length - 1
+      targetIndex < flattenedSegments.value.length - 1 &&
+      !flattenedSegments.value[targetIndex]?.segmentVisible
     ) {
       targetIndex = offset > 0 ? targetIndex + 1 : targetIndex - 1
     }

diff --git a/packages/pro/search/src/composables/useSegmentStates.ts b/packages/pro/search/src/composables/useSegmentStates.ts
@@ -64,7 +64,7 @@ export function useSegmentStates(
         res[state.name] = {
           ...state,
           index,
-          selectionStart: segmentSelectionStarts.value[state.name] ?? 0,
+          selectionStart: segmentSelectionStarts.value[state.name] ?? -1,
         }
 
         return res
@@ -91,7 +91,7 @@ export function useSegmentStates(
       return
     }
 
-    const targetSegmentStateName = searchState.value?.segmentStates[currentIndex + _offset].name
+    const targetSegmentStateName = searchState.value?.segmentStates[currentIndex + _offset]?.name
     const targetSegmentState = targetSegmentStateName && segmentStates.value[targetSegmentStateName]
     if (!targetSegmentState) {
       return
@@ -115,7 +115,7 @@ export function useSegmentStates(
     updateSegmentValue(props.searchItem!.key, name, value)
   }
   const handleSegmentSelect = (name: string, selectionStart: number | undefined | null) => {
-    segmentSelectionStarts.value[name] = selectionStart ?? 0
+    segmentSelectionStarts.value[name] = selectionStart ?? -1
   }
   const confirmSearchItem = () => {
     const key = props.searchItem!.key