chore: add auto dropdown width to demo

Author: ghiscoding

demo/src/options/options30.html

@@ -88,4 +88,17 @@ <h2 class="bd-title">
       </select>
     </div>
   </div>
+
+  <div class="mb-3 row">
+    <label class="col-sm-3 text-end"> Dropdown width </label>
+
+    <div class="col-sm-9">
+      <select id="select4" data-width="200">
+        <option value="1">This is the first option and value is 1</option>
+        <option value="2">This is the second option and value is 2</option>
+        <option value="3">This is the third option and value is 3</option>
+        <option value="4">This is the fourth option and value is 4</option>
+      </select>
+    </div>
+  </div>
 </div>

demo/src/options/options30.ts

@@ -4,6 +4,7 @@ export default class Example {
   ms1?: MultipleSelectInstance;
   ms2?: MultipleSelectInstance;
   ms3?: MultipleSelectInstance;
+  ms4?: MultipleSelectInstance;
 
   mount() {
     this.ms1 = multipleSelect('#select1', {
@@ -14,27 +15,29 @@ export default class Example {
     }) as MultipleSelectInstance;
 
     this.ms2 = multipleSelect('#select2', {
-      autoAdjustDropWidthByTextSize: true,
       autoAdjustDropHeight: true,
       position: 'top',
       showOkButton: true,
     }) as MultipleSelectInstance;
 
     this.ms3 = multipleSelect('#select3', {
-      autoAdjustDropWidthByTextSize: true,
       autoAdjustDropHeight: true,
       filter: true,
       position: 'top',
     }) as MultipleSelectInstance;
+
+    this.ms4 = multipleSelect('#select4') as MultipleSelectInstance;
   }
 
   unmount() {
     // destroy ms instance(s) to avoid DOM leaks
     this.ms1?.destroy();
     this.ms2?.destroy();
     this.ms3?.destroy();
+    this.ms4?.destroy();
     this.ms1 = undefined;
     this.ms2 = undefined;
     this.ms3 = undefined;
+    this.ms4 = undefined;
   }
 }