remove select in option in uui-select

Author: LanThuyNguyen

packages/uui-select/lib/uui-select.element.ts

@@ -11,7 +11,6 @@ declare global {
     name: string;
     value: string;
     group?: string;
-    selected?: boolean;
     disabled?: boolean;
   }
 }
@@ -87,7 +86,6 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
     name: string;
     value: string;
     group?: string;
-    selected?: boolean;
     disabled?: boolean;
   }`
    */
@@ -173,8 +171,6 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
     if (changedProperties.has('options')) {
       this._extractGroups();
       this._values = this.options.map(option => option.value);
-      const selected = this.options.find(option => option.selected);
-      this.value = selected ? selected.value : '';
     }
 
     if (changedProperties.has('value')) {
@@ -200,13 +196,9 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
   private _renderOption(
     name: string,
     value: string,
-    selected: boolean | undefined,
     disabled: boolean | undefined,
   ) {
-    return html`<option
-      value="${value}"
-      ?selected=${selected}
-      ?disabled=${disabled}>
+    return html`<option value="${value}" ?disabled=${disabled}>
       ${name}
     </option>`;
   }
@@ -224,12 +216,7 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
             )}>
             ${this.options.map(option =>
               option.group === group
-                ? this._renderOption(
-                    option.name,
-                    option.value,
-                    option.selected,
-                    option.disabled,
-                  )
+                ? this._renderOption(option.name, option.value, option.disabled)
                 : '',
             )}
           </optgroup>`,
@@ -259,12 +246,7 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
       ${this.options
         .filter(option => !option.group)
         .map(option =>
-          this._renderOption(
-            option.name,
-            option.value,
-            option.selected,
-            option.disabled,
-          ),
+          this._renderOption(option.name, option.value, option.disabled),
         )}
     </select>`;
   }

packages/uui-select/lib/uui-select.story.ts

@@ -52,10 +52,7 @@ const options: Array<Option> = [
   { name: 'Strawberry', value: 'red' },
 ];
 
-const preselectedOptions: Array<Option> = options.map(option => {
-  if (option.name === 'Aubergine') return { ...option, selected: true };
-  return option;
-});
+const preselectedValue: string = 'orange';
 
 const groupedOptions: Array<Option> = options.map(option => {
   if (options.indexOf(option) <= 2) return { ...option, group: 'Vegetables' };
@@ -70,8 +67,9 @@ export const Default: Story = {
 
 export const Preselected: Story = {
   args: {
-    options: preselectedOptions,
+    options: options,
     label: 'Preselected',
+    value: preselectedValue,
   },
   parameters: {
     controls: { include: ['placeholder'] },
@@ -86,7 +84,7 @@ export const Preselected: Story = {
 const options: Array<Option> = [
 { name: 'Carrot', value: 'orange' },
 { name: 'Cucumber', value: 'green' },
-{ name: 'Aubergine', value: 'purple', selected: true },
+{ name: 'Aubergine', value: 'purple' },
 { name: 'Blueberry', value: 'Blue' },
 { name: 'Banana', value: 'yellow' },
 { name: 'Strawberry', value: 'red' },
@@ -161,7 +159,8 @@ export const Readonly: Story = {
   args: {
     readonly: true,
     label: 'Label',
-    options: preselectedOptions,
+    options: options,
+    value: preselectedValue,
   },
   parameters: {
     docs: {

packages/uui-select/lib/uui-select.test.ts

@@ -3,7 +3,7 @@ import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { UUISelectElement } from './uui-select.element';
 
 const options: Array<Option> = [
-  { name: 'Carrot', value: 'orange', selected: true },
+  { name: 'Carrot', value: 'orange' },
   { name: 'Cucumber', value: 'green' },
   { name: 'Aubergine', value: 'purple' },
   { name: 'Blueberry', value: 'Blue' },