Merge pull request #1181 from creative-commoners/pulls/1.7/popover-op…

…tion-set FIX Correct sizing of PopoverOptionSet, restore dismissal on blur
silverstripe · Feb 18, 2021 · a2b721c · a2b721c
2 parents f269c2b + bf17ba3
commit a2b721c
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 12 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/PopoverOptionSet/PopoverOptionSet.js b/client/src/components/PopoverOptionSet/PopoverOptionSet.js
@@ -205,10 +205,11 @@ class PopoverOptionSet extends Component {
         container={container}
         hideArrow
         isOpen={isOpen}
+        onKeyDown={this.handleKeyDown}
         placement={placement}
         target={target}
         toggle={this.handleToggle}
-        onKeyDown={this.handleKeyDown}
+        trigger="legacy"
       >
         {this.renderSearchBox()}
         {this.renderOptionButtons()}

diff --git a/client/src/components/PopoverOptionSet/PopoverOptionSet.scss b/client/src/components/PopoverOptionSet/PopoverOptionSet.scss
@@ -2,22 +2,16 @@ $button-height: 40px;
 $column-width: 225px;
 
 .popover-option-set {
-  max-width: $column-width;
   display: flex;
   flex-direction: column;
-  border-radius: $border-radius; // Change to equal 4px
-
-  @include media-breakpoint-up(sm) {
-    max-width: $column-width * 2;
-  }
+  border-radius: $border-radius;
 
   > .popover {
-    min-width: 280px;
-    max-width: 100%;
     overflow: hidden;
+    width: calc(100% - 10px);
 
     @include media-breakpoint-up(sm) {
-      min-width: 450px;
+      max-width: $column-width * 2;
     }
   }