From b48dcf5947021efee097bdb7fe61e0ba074d99df Mon Sep 17 00:00:00 2001
From: Lan Nguyen Thuy <lnt@umbraco.dk>
Date: Thu, 3 Jul 2025 13:07:26 +0700
Subject: [PATCH 1/3] remove select in option in uui-select

---
 packages/uui-select/lib/uui-select.element.ts | 24 +++----------------
 packages/uui-select/lib/uui-select.story.ts   | 13 +++++-----
 packages/uui-select/lib/uui-select.test.ts    |  2 +-
 3 files changed, 10 insertions(+), 29 deletions(-)

diff --git a/packages/uui-select/lib/uui-select.element.ts b/packages/uui-select/lib/uui-select.element.ts
index 41852be11..eef961fda 100644
--- a/packages/uui-select/lib/uui-select.element.ts
+++ b/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>`;
   }
diff --git a/packages/uui-select/lib/uui-select.story.ts b/packages/uui-select/lib/uui-select.story.ts
index b11dfa2c7..e8b400282 100644
--- a/packages/uui-select/lib/uui-select.story.ts
+++ b/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: {
diff --git a/packages/uui-select/lib/uui-select.test.ts b/packages/uui-select/lib/uui-select.test.ts
index 71a2876ef..8b7607d1c 100644
--- a/packages/uui-select/lib/uui-select.test.ts
+++ b/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' },

From 7ba037b8321660a988fb2d6288ba7b52798984d3 Mon Sep 17 00:00:00 2001
From: Lan Nguyen Thuy <lnt@umbraco.dk>
Date: Thu, 10 Jul 2025 17:32:53 +0700
Subject: [PATCH 2/3] update uui-select test

---
 packages/uui-select/lib/uui-select.story.ts | 2 +-
 packages/uui-select/lib/uui-select.test.ts  | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/uui-select/lib/uui-select.story.ts b/packages/uui-select/lib/uui-select.story.ts
index e8b400282..a9c74b084 100644
--- a/packages/uui-select/lib/uui-select.story.ts
+++ b/packages/uui-select/lib/uui-select.story.ts
@@ -52,7 +52,7 @@ const options: Array<Option> = [
   { name: 'Strawberry', value: 'red' },
 ];
 
-const preselectedValue: string = 'orange';
+const preselectedValue: string = 'purple';
 
 const groupedOptions: Array<Option> = options.map(option => {
   if (options.indexOf(option) <= 2) return { ...option, group: 'Vegetables' };
diff --git a/packages/uui-select/lib/uui-select.test.ts b/packages/uui-select/lib/uui-select.test.ts
index 8b7607d1c..0a503d854 100644
--- a/packages/uui-select/lib/uui-select.test.ts
+++ b/packages/uui-select/lib/uui-select.test.ts
@@ -20,6 +20,7 @@ describe('UUISelectElement', () => {
       html`<uui-select
         label="foo"
         name="bar"
+        .value="orange"
         .options=${options}></uui-select>`,
     );
     input = element.shadowRoot?.querySelector('#native');
@@ -67,7 +68,11 @@ describe('UUISelect in Form', () => {
   beforeEach(async () => {
     formElement = await fixture(
       html` <form>
-        <uui-select label="foo" name="bar" .options=${options}></uui-select>
+        <uui-select
+          label="foo"
+          name="bar"
+          .value="orange"
+          .options=${options}></uui-select>
       </form>`,
     );
     element = formElement.querySelector('uui-select') as any;
@@ -112,6 +117,7 @@ describe('UUISelect in Form', () => {
           <uui-select
             label="test label"
             name="test"
+            .value="orange"
             .options=${options}></uui-select>
         </form>`,
       );

From 7df0dce1191d24f41355cac73267a0f0a1d46673 Mon Sep 17 00:00:00 2001
From: Lan Nguyen Thuy <lnt@umbraco.dk>
Date: Fri, 11 Jul 2025 13:59:22 +0700
Subject: [PATCH 3/3] update ui select test

---
 packages/uui-select/lib/uui-select.test.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/uui-select/lib/uui-select.test.ts b/packages/uui-select/lib/uui-select.test.ts
index 0a503d854..6c6ce13e7 100644
--- a/packages/uui-select/lib/uui-select.test.ts
+++ b/packages/uui-select/lib/uui-select.test.ts
@@ -11,6 +11,8 @@ const options: Array<Option> = [
   { name: 'Strawberry', value: 'red' },
 ];
 
+const selectdVaue: string = 'orange';
+
 describe('UUISelectElement', () => {
   let element: UUISelectElement;
   let input: HTMLSelectElement | null | undefined;
@@ -71,7 +73,7 @@ describe('UUISelect in Form', () => {
         <uui-select
           label="foo"
           name="bar"
-          .value="orange"
+          .value=${selectdVaue}
           .options=${options}></uui-select>
       </form>`,
     );