feat(smart-select): add closeByBackdropClick parameter

fixes #4107
framework7io · Dec 16, 2022 · 66d899b · 66d899b
1 parent 92fd6e5
commit 66d899b
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/src/core/components/smart-select/smart-select-class.js b/src/core/components/smart-select/smart-select-class.js
@@ -812,6 +812,7 @@ class SmartSelect extends Framework7Class {
       content: popupHtml,
       push: ss.params.popupPush,
       swipeToClose: ss.params.popupSwipeToClose,
+      closeByBackdropClick: ss.params.closeByBackdropClick,
       on: {
         popupOpen(popup) {
           ss.onOpen('popup', popup.el);
@@ -855,6 +856,7 @@ class SmartSelect extends Framework7Class {
       closeByOutsideClick: true,
       push: ss.params.sheetPush,
       swipeToClose: ss.params.sheetSwipeToClose,
+      closeByBackdropClick: ss.params.closeByBackdropClick,
       on: {
         sheetOpen(sheet) {
           ss.onOpen('sheet', sheet.el);
@@ -893,6 +895,7 @@ class SmartSelect extends Framework7Class {
     const popoverParams = {
       content: popoverHtml,
       targetEl: ss.$el,
+      closeByBackdropClick: ss.params.closeByBackdropClick,
       on: {
         popoverOpen(popover) {
           ss.onOpen('popover', popover.el);

diff --git a/src/core/components/smart-select/smart-select.d.ts b/src/core/components/smart-select/smart-select.d.ts
@@ -85,7 +85,8 @@ export namespace SmartSelect {
     url?: string;
     /** Additional CSS class name to be set on Smart Select container (Page, Popup, Popover or Sheet) */
     cssClass?: string;
-
+    /** When enabled, Smart Select modal (Popover, Popup, Sheet) will be closed on backdrop click. (default true) */
+    closeByBackdropClick?: boolean;
     /** Select option icon to be set on all options. If it just a string then will create an icon with this class. If it is in the format of `f7:icon_name` then it will create a F7-Icons icon. If it is in the format of `md:icon_name` then it will create a Material Icons icon. */
     optionIcon?: string;
     /** Same as `optionIcon` but will apply only when iOS theme is active */

diff --git a/src/core/components/smart-select/smart-select.js b/src/core/components/smart-select/smart-select.js
@@ -21,6 +21,7 @@ export default {
       pageBackLinkText: 'Back',
       popupCloseLinkText: 'Close',
       popupTabletFullscreen: false,
+      closeByBackdropClick: true,
       sheetCloseLinkText: 'Done',
       searchbar: false,
       searchbarPlaceholder: 'Search',