selectic 3.2.0 → 3.2.1

package/dist/selectic.common.js

@@ -2921,6 +2921,17 @@ let Selectic = class Selectic extends vtyx.Vue {
             }
             const target = evt.target;
             if (!extendedListEl.contains(target) && !this.$el.contains(target)) {
+                if (keepOpenWithOtherSelectic) {
+                    let classSelector = '.selectic';
+                    if (typeof keepOpenWithOtherSelectic === 'string') {
+                        classSelector += keepOpenWithOtherSelectic;
+                    }
+                    const parentIsSelectic = target === null || target === void 0 ? void 0 : target.closest(classSelector);
+                    if (parentIsSelectic) {
+                        /* Do not close current Selectic */
+                        return;
+                    }
+                }
                 store.commit('isOpen', false);
             }
         };

package/dist/selectic.esm.js

@@ -2917,6 +2917,17 @@ let Selectic = class Selectic extends Vue {
             }
             const target = evt.target;
             if (!extendedListEl.contains(target) && !this.$el.contains(target)) {
+                if (keepOpenWithOtherSelectic) {
+                    let classSelector = '.selectic';
+                    if (typeof keepOpenWithOtherSelectic === 'string') {
+                        classSelector += keepOpenWithOtherSelectic;
+                    }
+                    const parentIsSelectic = target === null || target === void 0 ? void 0 : target.closest(classSelector);
+                    if (parentIsSelectic) {
+                        /* Do not close current Selectic */
+                        return;
+                    }
+                }
                 store.commit('isOpen', false);
             }
         };

package/doc/params.md

@@ -312,12 +312,17 @@ will not be displayed and the filter panel is always open.
 
 ## keepOpenWithOtherSelectic
 
-Type: `boolean`
+Type: `boolean | string`
 
 Default value: `false`
 
-By default, only one selectic component can be open at the same time. So if another Selectic component is open (mainly programmatically) then any previously open component is closed.
-If `keepOpenWithOtherSelectic` is set to `true`, this component stays open when another Selectic component opens.
+By default, only one selectic component can be open at the same time. So if another Selectic component is open then any previously open component is closed.
+
+When `keepOpenWithOtherSelectic` is set to `true`, this component stays open when any other Selectic component opens.
+
+When it is set to a `non-empty string`, this component stays open only when another Selectic component that matches the given CSS selector opens.
+
+For falsy values, the component always closes when another Selectic opens.
 
 Note: This attribute does not prevent closing when user clicks outside the component.
 
@@ -330,6 +335,15 @@ Note: This attribute does not prevent closing when user clicks outside the compo
 />
 ```
 
+```html
+<selectic
+    :params="{
+        keepOpenWithOtherSelectic: '.class-name',
+    }"
+    :options="optionList"
+/>
+```
+
 ## listPosition
 
 Type: `'auto' | 'bottom' | 'top'`

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.2.0",
+    "version": "3.2.1",
     "description": "Smart Select for VueJS 3.x",
     "main": "dist/selectic.common.js",
     "module": "dist/selectic.esm.js",

package/src/Store.tsx

@@ -208,8 +208,15 @@ export interface Props {
     /** Overwrite default icon family */
     iconFamily?: IconFamily | null;
 
-    /** Keep this component open if another Selectic component opens */
-    keepOpenWithOtherSelectic?: boolean;
+    /** Keep this component open if another Selectic component opens.
+     *
+     * - `true`  → Keep open for **any** Selectic component.
+     * - `string` → Keep open only when the other Selectic matches the given CSS selector.
+     * - `false` (default) → Always close when another Selectic opens.
+     *
+     * An empty string is treated the same as `false`.
+     */
+    keepOpenWithOtherSelectic?: boolean | string;
 
     /** Selectic configuration */
     params?: SelecticStoreStateParams;

package/src/index.tsx

@@ -146,8 +146,15 @@ export interface ParamProps {
      */
     optionBehavior?: string;
 
-    /** Keep this component open if another Selectic component opens */
-    keepOpenWithOtherSelectic?: boolean;
+    /** Keep this component open if another Selectic component opens.
+     *
+     * - `true`  → Keep open for **any** Selectic component.
+     * - `string` → Keep open only when the other Selectic matches the given CSS selector.
+     * - `false` (default) → Always close when another Selectic opens.
+     *
+     * An empty string is treated the same as `false`.
+     */
+    keepOpenWithOtherSelectic?: boolean | string;
 
     /** Avoid click on group name to select all items in this group. */
     disableGroupSelection?: boolean;
@@ -361,9 +368,24 @@ export default class Selectic extends Vue<Props> {
                 return;
             }
 
-            const target =  evt.target as Node;
+            const target =  evt.target as Element | null;
 
             if (!extendedListEl.contains(target) && !this.$el.contains(target)) {
+                if (keepOpenWithOtherSelectic) {
+                    let classSelector = '.selectic';
+
+                    if (typeof keepOpenWithOtherSelectic === 'string') {
+                        classSelector += keepOpenWithOtherSelectic;
+                    }
+
+                    const parentIsSelectic = target?.closest(classSelector);
+
+                    if (parentIsSelectic) {
+                        /* Do not close current Selectic */
+                        return;
+                    }
+                }
+
                 store.commit('isOpen', false);
             }
         };

package/types/Store.d.ts

@@ -135,8 +135,15 @@ export interface Props {
     icons?: PartialIcons | null;
     /** Overwrite default icon family */
     iconFamily?: IconFamily | null;
-    /** Keep this component open if another Selectic component opens */
-    keepOpenWithOtherSelectic?: boolean;
+    /** Keep this component open if another Selectic component opens.
+     *
+     * - `true`  → Keep open for **any** Selectic component.
+     * - `string` → Keep open only when the other Selectic matches the given CSS selector.
+     * - `false` (default) → Always close when another Selectic opens.
+     *
+     * An empty string is treated the same as `false`.
+     */
+    keepOpenWithOtherSelectic?: boolean | string;
     /** Selectic configuration */
     params?: SelecticStoreStateParams;
     /** Method to call to fetch extra data */

package/types/index.d.ts

@@ -65,8 +65,15 @@ export interface ParamProps {
      * Example: "sort-ODE"
      */
     optionBehavior?: string;
-    /** Keep this component open if another Selectic component opens */
-    keepOpenWithOtherSelectic?: boolean;
+    /** Keep this component open if another Selectic component opens.
+     *
+     * - `true`  → Keep open for **any** Selectic component.
+     * - `string` → Keep open only when the other Selectic matches the given CSS selector.
+     * - `false` (default) → Always close when another Selectic opens.
+     *
+     * An empty string is treated the same as `false`.
+     */
+    keepOpenWithOtherSelectic?: boolean | string;
     /** Avoid click on group name to select all items in this group. */
     disableGroupSelection?: boolean;
 }