Auto refresh select width when the attribute is auto

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

@@ -733,13 +733,15 @@ class MultipleSelect {
       computedWidth = window.getComputedStyle(this.$el[0]).width
 
       if (computedWidth === 'auto') {
-        computedWidth = this.$drop.outerWidth() + 20
+        computedWidth = this.$drop.outerWidth() + Constants.ICON_WIDTH_OFFSET
       }
     } else {
-      computedWidth = this.$el.outerWidth() + 20
+      computedWidth = this.$el.outerWidth() + Constants.ICON_WIDTH_OFFSET
     }
 
-    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,32 @@ 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
+
+      if (context) {
+        const styles = window.getComputedStyle ? window.getComputedStyle($span[0]) : $span[0].style
+        const computedFont = styles.font && styles.font.trim()
+
+        context.font = computedFont ||
+          `${styles.fontWeight || 'normal'} ${styles.fontSize || '16px'} ${styles.fontFamily || 'sans-serif'}`
+
+        const textWidth = context.measureText($span.text()).width
+        const iconWidth = Constants.ICON_WIDTH_OFFSET + (this.$close.width() || 0)
+        const spanPadding = parseFloat($span.css('paddingLeft')) + parseFloat($span.css('paddingRight'))
+        const totalWidth = textWidth + iconWidth + spanPadding + 10
+
+        this.$parent.css('width', totalWidth)
+      } else {
+        this.$parent.css('width', 200)
+      }
+    }
+
     // set selects to select
     this.$el.val(this.getSelects())
 

src/constants/index.js

@@ -1,6 +1,7 @@
 const VERSION = '2.3.1'
 const BLOCK_ROWS = 500
 const CLUSTER_BLOCKS = 4
+const ICON_WIDTH_OFFSET = 20
 
 const DEFAULTS = {
   name: '',
@@ -146,6 +147,8 @@ const Constants = {
 
   DEFAULTS,
 
+  ICON_WIDTH_OFFSET,
+
   METHODS,
 
   LOCALES: {

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>