handle inert polyfill separately, fix multiselect input styling, readonly combo focus handling

package-lock.json

@@ -775,7 +775,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1190,7 +1191,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -1246,6 +1248,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -1289,12 +1292,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -2557,11 +2562,6 @@
         "webidl-conversions": "^4.0.2"
       }
     },
-    "wicg-inert": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-2.2.1.tgz",
-      "integrity": "sha512-xaI3ig1hhEcec2+5uUs9i2BrVXzJ83dOn2ij3ze2RAKUQ4X03Cm99SLny1Vh1KL4Rc1SPZnQOs0mdtVkQ0Tclw=="
-    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",

package.json

@@ -16,9 +16,6 @@
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll"
   },
-  "dependencies": {
-    "wicg-inert": "^2.1.2"
-  },
   "devDependencies": {
     "@stencil/core": "~0.16.2"
   },

src/components/combo-noinput/combo-noinput.tsx

@@ -45,6 +45,9 @@ export class ComboNoInput {
   // Unique ID that should really use a UUID library instead
   private htmlId = uniqueId();
 
+  // Prevent menu closing before click completed
+  private ignoreBlur = false;
+
   // save reference to input element
   private inputRef: HTMLElement;
 
@@ -92,6 +95,7 @@ export class ComboNoInput {
                   event.stopPropagation();
                   this.onOptionClick(i);
                 }}
+                onMouseDown={this.onOptionMouseDown.bind(this)}
               >{option.name}</div>
             );
           })}
@@ -126,6 +130,11 @@ export class ComboNoInput {
   }
 
   private onComboBlur() {
+    if (this.ignoreBlur) {
+      this.ignoreBlur = false;
+      return;
+    }
+
     this.updateMenuState(false, false);
   }
 
@@ -139,6 +148,10 @@ export class ComboNoInput {
     this.updateMenuState(false);
   }
 
+  private onOptionMouseDown() {
+    this.ignoreBlur = true;
+  }
+
   private selectOption(index: number) {
     const selected = this.options[index];
     this.value = selected.name;

src/components/modal/modal.tsx

@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 
 import { Component, Event, EventEmitter, Prop, Watch } from '@stencil/core';
-import 'wicg-inert';
+// import 'wicg-inert';
 
 @Component({
   tag: 'sui-modal',

src/components/multiselect-inline/multiselect-inline.tsx

@@ -111,7 +111,7 @@ export class MultiselectInline {
             {selectedOptions.map((option, i) => {
               return (
                 <li>
-                  <button class="remove-option" aria-describedby={`${htmlId}-remove`} onClick={() => { this.removeOption(i); }}>
+                  <button type="button" class="remove-option" aria-describedby={`${htmlId}-remove`} onClick={() => { this.removeOption(i); }}>
                     {option.name}
                     <span class="remove-icon" aria-hidden="true">x</span>
                   </button>

src/index.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
   <title>Stencil Component Starter</title>
   <script src="/build/caiacc.js"></script>
+  <script src="./assets/inert.min.js"></script>
   <style type="text/css" src="/build/style.css"></style>
   <style type="text/css">
   .fruit-select,

src/shared/combo-base.css

@@ -160,12 +160,13 @@ select.combo-input {
   border: 2px solid rgba(0,0,0,.42);
   border-radius: 4px;
   display: flex;
+  flex-wrap: wrap;
   min-height: calc(1.4em + 26px);
   padding: 12px 16px 14px;
 }
 
 .multiselect-inline .selected-options {
-  flex: 0 0 auto;
+  flex: 0 1 auto;
 }
 
 .multiselect-inline .selected-options li {
@@ -174,7 +175,7 @@ select.combo-input {
 
 .multiselect-inline .combo-input {
   border: none;
-  flex: 1 1 auto;
+  flex: 1 1 35%;
   min-height: calc(1.4em - 2px);
   padding: 0;
 }

src/studies/grid/actions.html

@@ -6,6 +6,7 @@
   <title>Grid Usability Study</title>
   <link rel="stylesheet" href="../../style.css"></style>
   <script src="/build/caiacc.js"></script>
+  <script src="./assets/inert.min.js"></script>
 </head>
 <body>
   <div role="main" class="main">

src/studies/grid/editable.html

@@ -6,6 +6,7 @@
   <title>Grid Usability Study</title>
   <link rel="stylesheet" href="../../style.css"></style>
   <script src="/build/caiacc.js"></script>
+  <script src="./assets/inert.min.js"></script>
 </head>
 <body>
   <div role="main" class="main">

src/studies/grid/fast-editable.html

@@ -6,6 +6,7 @@
   <title>Grid Usability Study</title>
   <link rel="stylesheet" href="../../style.css"></style>
   <script src="/build/caiacc.js"></script>
+  <script src="./assets/inert.min.js"></script>
 </head>
 <body>
   <div role="main" class="main">

src/studies/grid/selection-aria.html

@@ -6,6 +6,7 @@
   <title>Grid Usability Study</title>
   <link rel="stylesheet" href="../../style.css"></style>
   <script src="/build/caiacc.js"></script>
+  <script src="./assets/inert.min.js"></script>
 </head>
 <body>
   <div role="main" class="main">

src/studies/grid/selection-checks.html

@@ -6,6 +6,7 @@
   <title>Grid Usability Study</title>
   <link rel="stylesheet" href="../../style.css"></style>
   <script src="/build/caiacc.js"></script>
+  <script src="./assets/inert.min.js"></script>
 </head>
 <body>
   <div role="main" class="main">

src/studies/grid/simple-actions.html

@@ -6,6 +6,7 @@
   <title>Grid Usability Study</title>
   <link rel="stylesheet" href="../../style.css"></style>
   <script src="/build/caiacc.js"></script>
+  <script src="./assets/inert.min.js"></script>
 </head>
 <body>
   <div role="main" class="main">

src/studies/modal/confirm-modal.html

@@ -6,7 +6,8 @@
   <title>Modal Dialog Usability Study</title>
   <link rel="stylesheet" href="../../style.css"></style>
   <link rel="stylesheet" href="./forms.css"></style>
-  <script src="/build/caiacc.js"></script>  
+  <script src="/build/caiacc.js"></script>
+  <script src="./assets/inert.min.js"></script>
 </head>
 <body>
   <div role="main" class="main example-form">

src/studies/modal/form-modal.html

@@ -6,7 +6,8 @@
   <title>Modal Dialog Usability Study</title>
   <link rel="stylesheet" href="../../style.css"></style>
   <link rel="stylesheet" href="./forms.css"></style>
-  <script src="/build/caiacc.js"></script>  
+  <script src="/build/caiacc.js"></script>
+  <script src="./assets/inert.min.js"></script>
 </head>
 <body>
   <div role="main" class="main example-form">