Auto refresh select width when the attribute is auto

Author: Dongming Huang

site/website/static/templates/custom-dropdown-width.html

@@ -1,7 +1,7 @@
 <script>
   init({
     title: 'Custom Dropdown Width',
-    desc: 'Use <code>dropWidth: 580</code> option to custom the dropdown width.',
+    desc: 'Use <code>dropWidth: 580</code> option to custom the dropdown width, or use <code>width: \'auto\'</code> option to auto adjust the width based on the selected text.',
     links: ['multiple-select.min.css'],
     scripts: ['multiple-select.min.js']
   })
@@ -13,7 +13,7 @@
     </label>
 
     <div class="col-sm-10">
-      <select multiple="multiple">
+      <select name="basic" multiple="multiple">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
@@ -47,15 +47,34 @@
       </select>
     </div>
   </div>
+
+  <div class="mb-3 row">
+    <label class="col-sm-2">
+      Auto width
+    </label>
+
+    <div class="col-sm-10">
+      <select name="auto-width">
+        <option value="1">First</option>
+        <option value="2">Second</option>
+        <option value="3">Third</option>
+        <option value="4">Fourth</option>
+      </select>
+    </div>
+  </div>
 </div>
 
 <script>
   function mounted() {
-    $('select').multipleSelect({
+    $('select[name="basic"]').multipleSelect({
       multiple: true,
       width: 500,
       multipleWidth: 70,
       dropWidth: 580
     })
+
+    $('select[name="auto-width"]').multipleSelect({
+      width: 'auto'
+    })
   }
 </script>

src/MultipleSelect.js

@@ -739,7 +739,9 @@ class MultipleSelect {
       computedWidth = this.$el.outerWidth() + 20
     }
 
-    this.$parent.css('width', this.options.width || computedWidth)
+    if (this.options.width !== 'auto') {
+      this.$parent.css('width', this.options.width || computedWidth)
+    }
 
     this.$el.show().addClass('ms-offscreen')
   }
@@ -861,6 +863,21 @@ class MultipleSelect {
       $span.prop('title', this.getSelects('text'))
     }
 
+    if (this.options.width === 'auto') {
+      if (!this._autoWidthCanvas) {
+        this._autoWidthCanvas = document.createElement('canvas')
+        this._autoWidthContext = this._autoWidthCanvas.getContext('2d')
+      }
+
+      const context = this._autoWidthContext
+      const styles = window.getComputedStyle ? window.getComputedStyle($span[0]) : $span[0].style
+
+      context.font = `${styles.fontWeight || 'normal'} ${styles.fontSize || '16px'} ${styles.fontFamily || 'sans-serif'}`
+      const textWidth = context.measureText($span.text()).width
+
+      this.$parent.css('width', textWidth + 38)
+    }
+
     // set selects to select
     this.$el.val(this.getSelects())
 

vue-examples/src/assets/MS.json

@@ -100,7 +100,7 @@
             {
                 "title": "Custom Dropdown Width",
                 "url": "custom-dropdown-width.html",
-                "description": "Use <code>dropWidth: 580</code> option to custom the dropdown width."
+                "description": "Use <code>dropWidth: 580</code> option to custom the dropdown width, or use <code>width: 'auto'</code> option to auto adjust the width based on the selected text."
             },
             {
                 "title": "Max Height",

vue-examples/src/examples/CustomDropdownWidth.vue

@@ -104,6 +104,29 @@
         </MultipleSelect>
       </div>
     </div>
+
+    <div class="form-group row">
+      <label class="col-sm-2">
+        Auto width
+      </label>
+
+      <div class="col-sm-10">
+        <MultipleSelect width="auto">
+          <option value="1">
+            First
+          </option>
+          <option value="2">
+            Second
+          </option>
+          <option value="3">
+            Third
+          </option>
+          <option value="4">
+            Fourth
+          </option>
+        </MultipleSelect>
+      </div>
+    </div>
   </div>
 </template>