fix(pro:search): remove name input min-width (#1551)

IDuxFE · May 17, 2023 · 04e2500 · 04e2500
1 parent 05fdb30
commit 04e2500
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 102 deletions.
diff --git a/packages/pro/search/src/components/NameSelectOverlay.tsx b/packages/pro/search/src/components/NameSelectOverlay.tsx
@@ -99,12 +99,13 @@ export default defineComponent({
       panelKeyDown = keydown
     }
     const handleKeyDown = (evt: KeyboardEvent) => {
-      if (!selectedFieldKey.value && evt.key === 'Enter') {
+      if (!filteredDataSource.value.length && evt.key === 'Enter') {
         callEmit(proSearchProps.onItemCreate, {
           name: undefined,
           nameInput: props.searchValue,
         })
         props.onChange?.(undefined)
+        return false
       }
 
       if (!overlayOpened.value || !panelKeyDown) {

diff --git a/packages/pro/search/src/components/segment/Segment.tsx b/packages/pro/search/src/components/segment/Segment.tsx
@@ -141,6 +141,9 @@ export default defineComponent({
       setOverlayOpened(false)
       handleSegmentCancel(props.segment.name)
     }
+    const handleMouseDown = (evt: MouseEvent) => {
+      evt.stopImmediatePropagation()
+    }
 
     const { handleInput, handleFocus, handleKeyDown, setPanelOnKeyDown } = useInputEvents(
       props,
@@ -166,6 +169,7 @@ export default defineComponent({
         onInput={handleInput}
         onFocus={handleFocus}
         onKeydown={handleKeyDown}
+        onMousedown={handleMouseDown}
         onWidthChange={triggerOverlayUpdate}
       ></SegmentInput>
     )

diff --git a/packages/pro/search/src/components/segment/SegmentInput.tsx b/packages/pro/search/src/components/segment/SegmentInput.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { computed, defineComponent, inject, normalizeClass, onMounted, ref, watch } from 'vue'
+import { type CSSProperties, computed, defineComponent, inject, normalizeClass, onMounted, ref, watch } from 'vue'
 
 import { callEmit, convertCssPixel, useState } from '@idux/cdk/utils'
 
@@ -63,19 +63,21 @@ export default defineComponent({
 
     return () => {
       const prefixCls = `${mergedPrefixCls.value}-segment-input`
+      const { class: className, style, ...rest } = attrs
 
       return (
-        <span class={classes.value}>
+        <span class={normalizeClass([classes.value, className])}>
           <input
             ref={segmentInputRef}
             class={`${prefixCls}-inner`}
+            style={style as CSSProperties}
             value={props.value ?? ''}
             disabled={props.disabled}
             placeholder={props.placeholder}
             onInput={handleInput}
             onCompositionstart={handleCompositionStart}
             onCompositionend={handleCompositionEnd}
-            {...attrs}
+            {...rest}
           ></input>
           <MeasureElement onWidthChange={setInputWidth}>{props.value || props.placeholder || ''}</MeasureElement>
         </span>

diff --git a/packages/pro/search/src/segments/CreateNameSegment.tsx b/packages/pro/search/src/segments/CreateNameSegment.tsx
diff --git a/packages/pro/search/style/index.less b/packages/pro/search/style/index.less
@@ -221,7 +221,6 @@
     }
   }
   &-temp-segment-input {
-    min-width: 100px;
     margin-left: 8px;
   }
   &-name-segment-overlay {