Merge pull request #386 from 1CRM/select-input-hide-options-#381

Select input hide options #381
1CRM · Apr 29, 2024 · 42b45d1 · 42b45d1
2 parents 64bcd3a + 4017c79
commit 42b45d1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/packages/oceanfront/src/components/FieldBase.ts b/packages/oceanfront/src/components/FieldBase.ts
@@ -152,7 +152,7 @@ export const OfFieldBase = defineComponent({
     const padState = { listen: watchPosition() }
     const checkPad = (node: VNode) => calcPadding(node, padState)
 
-    const handlers = {
+    const handlers: any = {
       onBlur(_evt: FocusEvent) {
         focused.value = false
         if (focusGrp) focusGrp.blur()
@@ -172,18 +172,24 @@ export const OfFieldBase = defineComponent({
       onVueUpdated: checkPad,
       onVueUnmounted: checkPad
     }
-
+    if (fieldRender.onMouseleave) {
+      handlers.onmouseleave = fieldRender.onMouseleave
+    }
+    if (fieldRender.onMouseenter) {
+      handlers.onmouseenter = fieldRender.onMouseenter
+    }
     return () => {
       try {
         const outerId = (fieldRender.inputId ?? props.id) + '-outer'
         const mainId = (fieldRender.inputId ?? props.id) + '-main'
-        let overlay, overlayActive, overlayBlur
+        let overlay, overlayActive, overlayBlur, overlayCapture
         const dragIn =
           fieldRender.dragIn && makeDragIn(fieldRender.dragIn, dragOver)
         if (fieldRender.popup) {
           overlay = fieldRender.popup.content
           overlayActive = fieldRender.popup.visible ?? true
           overlayBlur = fieldRender.popup.onBlur
+          overlayCapture = fieldRender.popup.capture
         }
         const showFocused =
           focused.value ||
@@ -298,7 +304,7 @@ export const OfFieldBase = defineComponent({
             OfOverlay,
             {
               active: overlayActive,
-              capture: true,
+              capture: overlayCapture ?? true,
               shade: false,
               target: mainId ? '#' + mainId : '',
               onBlur: overlayBlur,

diff --git a/packages/oceanfront/src/fields/Select.ts b/packages/oceanfront/src/fields/Select.ts
@@ -36,7 +36,7 @@ export const OfSelectField = defineComponent({
     const config = useConfig()
     const itemMgr = useItems(config)
     const fieldCtx = makeFieldContext(props, ctx as SetupContext)
-
+    let selectTimerId: number | undefined
     const initialValue = computed(() => {
       let initial = fieldCtx.initialValue
       if (initial === undefined) initial = props.defaultValue
@@ -200,7 +200,7 @@ export const OfSelectField = defineComponent({
     }
 
     const hooks = {
-      onBlur(_evt: FocusEvent) {
+      onBlur() {
         focused.value = false
       },
       onFocus(_evt: FocusEvent) {
@@ -248,7 +248,17 @@ export const OfSelectField = defineComponent({
         ]
       }
     }
-
+    const selectMouseEvents = {
+      onMouseenter: () => {
+        clearTimeout(selectTimerId)
+      },
+      onMouseleave: () => {
+        if (!opened.value) return false
+        selectTimerId = window.setTimeout(() => {
+          closePopup()
+        }, 500)
+      }
+    }
     const fRender = fieldRender({
       blank: computed(() => {
         if (props.multi)
@@ -260,6 +270,7 @@ export const OfSelectField = defineComponent({
       }),
       class: 'of-select-field',
       click: clickOpen,
+      ...selectMouseEvents,
       cursor: computed(() => (fieldCtx.editable ? 'pointer' : null)),
       focus,
       focused,
@@ -279,11 +290,13 @@ export const OfSelectField = defineComponent({
                 onUpdateValue: (val: any) => {
                   fieldCtx.onUpdate?.(val)
                 },
-                class: 'of--elevated-1'
+                class: 'of--elevated-1',
+                ...selectMouseEvents,
+                onBlur: closePopup
               })
             : undefined,
         visible: opened,
-        onBlur: closePopup
+        capture: false
       },
       updated: computed(() => initialValue.value !== stateValue.value),
       value: stateValue

diff --git a/packages/oceanfront/src/fields/SelectPopup.ts b/packages/oceanfront/src/fields/SelectPopup.ts
@@ -35,7 +35,6 @@ export const OfSelectPopup = defineComponent({
     const itemMgr = useItems(config)
 
     const removing = ref(false)
-
     const isSelected = (item: any): boolean => {
       if (!props.multi) return props.value === item
       const values = Array.isArray(props.value) ? props.value : []

diff --git a/packages/oceanfront/src/lib/fields.ts b/packages/oceanfront/src/lib/fields.ts
@@ -29,6 +29,8 @@ export interface FieldRender {
   blank?: boolean
   class?: string | string[] | Record<string, boolean>
   click?: (evt?: MouseEvent) => boolean | void
+  onMouseleave?: (evt?: MouseEvent) => boolean | void
+  onMouseenter?: (evt?: MouseEvent) => boolean | void
   content?: () => Renderable | undefined
   cursor?: string
   dragIn?: FieldDragIn
@@ -139,6 +141,7 @@ export interface FieldPopup {
   content?: () => Renderable | undefined
   visible?: boolean
   onBlur?: () => void
+  capture?: boolean
   // position?
 }