feat(textarea): reflect disabled and readonly props

Author: thetaPC

core/api.txt

@@ -569,7 +569,6 @@ ion-datetime,part,calendar-day today
 ion-datetime,part,month-year-button
 ion-datetime,part,time-button
 ion-datetime,part,time-button active
-ion-datetime,part,wheel
 ion-datetime,part,wheel-item
 ion-datetime,part,wheel-item active
 
@@ -1693,7 +1692,6 @@ ion-segment-content,shadow
 
 ion-segment-view,shadow
 ion-segment-view,prop,disabled,boolean,false,false,false
-ion-segment-view,prop,swipeGesture,boolean,true,false,false
 ion-segment-view,event,ionSegmentViewScroll,SegmentViewScrollEvent,true
 
 ion-select,shadow
@@ -1768,7 +1766,6 @@ ion-select,part,supporting-text
 ion-select,part,text
 
 ion-select-modal,scoped
-ion-select-modal,prop,cancelText,string,'Close',false,false
 ion-select-modal,prop,header,string | undefined,undefined,false,false
 ion-select-modal,prop,multiple,boolean | undefined,undefined,false,false
 ion-select-modal,prop,options,SelectModalOption[],[],false,false
@@ -1876,7 +1873,7 @@ ion-textarea,prop,cols,number | undefined,undefined,false,true
 ion-textarea,prop,counter,boolean,false,false,false
 ion-textarea,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
 ion-textarea,prop,debounce,number | undefined,undefined,false,false
-ion-textarea,prop,disabled,boolean,false,false,false
+ion-textarea,prop,disabled,boolean,false,false,true
 ion-textarea,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
 ion-textarea,prop,errorText,string | undefined,undefined,false,false
 ion-textarea,prop,fill,"outline" | "solid" | undefined,undefined,false,false
@@ -1889,7 +1886,7 @@ ion-textarea,prop,minlength,number | undefined,undefined,false,false
 ion-textarea,prop,mode,"ios" | "md",undefined,false,false
 ion-textarea,prop,name,string,this.inputId,false,false
 ion-textarea,prop,placeholder,string | undefined,undefined,false,false
-ion-textarea,prop,readonly,boolean,false,false,false
+ion-textarea,prop,readonly,boolean,false,false,true
 ion-textarea,prop,required,boolean,false,false,false
 ion-textarea,prop,rows,number | undefined,undefined,false,false
 ion-textarea,prop,shape,"round" | undefined,undefined,false,false

core/src/components/textarea/textarea.tsx

@@ -132,7 +132,7 @@ export class Textarea implements ComponentInterface {
   /**
    * If `true`, the user cannot interact with the textarea.
    */
-  @Prop() disabled = false;
+  @Prop({ reflect: true }) disabled = false;
 
   /**
    * The fill for the item. If `"solid"` the item will have a background. If
@@ -177,7 +177,7 @@ export class Textarea implements ComponentInterface {
   /**
    * If `true`, the user cannot modify the value.
    */
-  @Prop() readonly = false;
+  @Prop({ reflect: true }) readonly = false;
 
   /**
    * If `true`, the user must fill in a value before submitting a form.

packages/angular/test/base/e2e/src/lazy/inputs.spec.ts

@@ -5,105 +5,126 @@ test.describe('Inputs', () => {
     await page.goto('/lazy/inputs');
   });
 
-  test('should have default values', async ({ page }) => {
-    // Check primary elements for default values
-    await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', true);
-    await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', 'nes');
-    await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', true);
-    await expect(page.locator('ion-input').first()).toHaveJSProperty('value', 'some text');
-    await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', '1234');
-    await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', '1994-03-15');
-    await expect(page.locator('ion-select').first()).toHaveJSProperty('value', 'nes');
-    await expect(page.locator('ion-range').first()).toHaveJSProperty('value', 50);
-  });
+  test.describe('basic functionality', () => {
+    test('should have default values', async ({ page }) => {
+      // Check primary elements for default values
+      await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', true);
+      await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', 'nes');
+      await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', true);
+      await expect(page.locator('ion-input').first()).toHaveJSProperty('value', 'some text');
+      await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', '1234');
+      await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', '1994-03-15');
+      await expect(page.locator('ion-select').first()).toHaveJSProperty('value', 'nes');
+      await expect(page.locator('ion-range').first()).toHaveJSProperty('value', 50);
+    });
 
-  test('should reset values', async ({ page }) => {
-    await page.locator('#reset-button').click();
-
-    // Check primary elements after reset
-    await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', false);
-    await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', false);
-    /**
-     * The `value` property gets set to undefined
-     * for these components, so we need to check
-     * that the value property is undefined.
-     */
-    await expect(page.locator('ion-input').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-select').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-range').first()).toHaveJSProperty('value', undefined);
-  });
+    test('should reset values', async ({ page }) => {
+      await page.locator('#reset-button').click();
+
+      // Check primary elements after reset
+      await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', false);
+      await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', false);
+      /**
+       * The `value` property gets set to undefined
+       * for these components, so we need to check
+       * that the value property is undefined.
+       */
+      await expect(page.locator('ion-input').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-select').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-range').first()).toHaveJSProperty('value', undefined);
+    });
 
-  test('should set values', async ({ page }) => {
-    await page.locator('#reset-button').click();
-    await page.locator('#set-button').click();
-
-    // Check primary elements after setting values
-    await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', true);
-    await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', 'nes');
-    await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', true);
-    await expect(page.locator('ion-input').first()).toHaveJSProperty('value', 'some text');
-    await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', '1234');
-    await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', '1994-03-15');
-    await expect(page.locator('ion-select').first()).toHaveJSProperty('value', 'nes');
-    await expect(page.locator('ion-range').first()).toHaveJSProperty('value', 50);
-  });
+    test('should set values', async ({ page }) => {
+      await page.locator('#reset-button').click();
+      await page.locator('#set-button').click();
+
+      // Check primary elements after setting values
+      await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', true);
+      await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', 'nes');
+      await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', true);
+      await expect(page.locator('ion-input').first()).toHaveJSProperty('value', 'some text');
+      await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', '1234');
+      await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', '1994-03-15');
+      await expect(page.locator('ion-select').first()).toHaveJSProperty('value', 'nes');
+      await expect(page.locator('ion-range').first()).toHaveJSProperty('value', 50);
+    });
 
-  test('should update angular when values change', async ({ page }) => {
-    await page.locator('#reset-button').click();
-
-    await page.locator('ion-checkbox#first-checkbox').click();
-    await page.locator('ion-radio').first().click();
-    await page.locator('ion-toggle').first().click();
-
-    await page.locator('ion-input').nth(0).locator('input').fill('hola');
-    await page.locator('ion-input').nth(0).locator('input').blur();
-
-    await page.locator('ion-input-otp input').nth(0).fill('1');
-    await page.locator('ion-input-otp input').nth(1).fill('2');
-    await page.locator('ion-input-otp input').nth(2).fill('3');
-    await page.locator('ion-input-otp input').nth(3).fill('4');
-    await page.locator('ion-input-otp input').nth(3).blur();
-
-    // Set date to 1994-03-14
-    await page.locator('ion-datetime').first().click();
-    await page.locator('ion-datetime').first().locator('.calendar-day:not([disabled])').first().click();
-
-    await page.locator('ion-select#game-console').click();
-    await expect(page.locator('ion-alert')).toBeVisible();
-    // Playstation option
-    await page.locator('ion-alert .alert-radio-button').nth(3).click();
-    // Click confirm button
-    await page.locator('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
-
-    // Check note text (Angular binding updates)
-    await expect(page.locator('#checkbox-note')).toHaveText('true');
-    await expect(page.locator('#radio-note')).toHaveText('nes');
-    await expect(page.locator('#toggle-note')).toHaveText('true');
-    await expect(page.locator('#input-note')).toHaveText('hola');
-    await expect(page.locator('#input-otp-note')).toHaveText('1234');
-    await expect(page.locator('#datetime-note')).toHaveText('1994-03-14');
-    await expect(page.locator('#select-note')).toHaveText('ps');
-  });
+    test('should update angular when values change', async ({ page }) => {
+      await page.locator('#reset-button').click();
 
-  test('should update values when erasing input', async ({ page }) => {
-    // Focus the input and press backspace to remove last character
-    await page.locator('ion-input').nth(0).locator('input').click();
-    await page.locator('ion-input').nth(0).locator('input').press('Backspace');
-    // Check mirror element reflects the change
-    await expect(page.locator('ion-input').nth(1)).toHaveJSProperty('value', 'some tex');
-    // Check note text (Angular binding)
-    await expect(page.locator('#input-note')).toHaveText('some tex');
-
-    // Focus the last OTP input and press backspace
-    await page.locator('ion-input-otp input').last().click();
-    await page.locator('ion-input-otp input').last().press('Backspace');
-    // Check mirror element reflects the change
-    await expect(page.locator('ion-input-otp').nth(1)).toHaveJSProperty('value', '123');
-    // Check note text (Angular binding)
-    await expect(page.locator('#input-otp-note')).toHaveText('123');
+      await page.locator('ion-checkbox#first-checkbox').click();
+      await page.locator('ion-radio').first().click();
+      await page.locator('ion-toggle').first().click();
+
+      await page.locator('ion-input').nth(0).locator('input').fill('hola');
+      await page.locator('ion-input').nth(0).locator('input').blur();
+
+      await page.locator('ion-input-otp input').nth(0).fill('1');
+      await page.locator('ion-input-otp input').nth(1).fill('2');
+      await page.locator('ion-input-otp input').nth(2).fill('3');
+      await page.locator('ion-input-otp input').nth(3).fill('4');
+      await page.locator('ion-input-otp input').nth(3).blur();
+
+      // Set date to 1994-03-14
+      await page.locator('ion-datetime').first().click();
+      await page.locator('ion-datetime').first().locator('.calendar-day:not([disabled])').first().click();
+
+      await page.locator('ion-select#game-console').click();
+      await expect(page.locator('ion-alert')).toBeVisible();
+      // Playstation option
+      await page.locator('ion-alert .alert-radio-button').nth(3).click();
+      // Click confirm button
+      await page.locator('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
+
+      // Check note text (Angular binding updates)
+      await expect(page.locator('#checkbox-note')).toHaveText('true');
+      await expect(page.locator('#radio-note')).toHaveText('nes');
+      await expect(page.locator('#toggle-note')).toHaveText('true');
+      await expect(page.locator('#input-note')).toHaveText('hola');
+      await expect(page.locator('#input-otp-note')).toHaveText('1234');
+      await expect(page.locator('#datetime-note')).toHaveText('1994-03-14');
+      await expect(page.locator('#select-note')).toHaveText('ps');
+    });
+
+    test('should update values when erasing input', async ({ page }) => {
+      // Focus the input and press backspace to remove last character
+      await page.locator('ion-input').nth(0).locator('input').click();
+      await page.locator('ion-input').nth(0).locator('input').press('Backspace');
+      // Check mirror element reflects the change
+      await expect(page.locator('ion-input').nth(1)).toHaveJSProperty('value', 'some tex');
+      // Check note text (Angular binding)
+      await expect(page.locator('#input-note')).toHaveText('some tex');
+
+      // Focus the last OTP input and press backspace
+      await page.locator('ion-input-otp input').last().click();
+      await page.locator('ion-input-otp input').last().press('Backspace');
+      // Check mirror element reflects the change
+      await expect(page.locator('ion-input-otp').nth(1)).toHaveJSProperty('value', '123');
+      // Check note text (Angular binding)
+      await expect(page.locator('#input-otp-note')).toHaveText('123');
+    });
+
+    test('should reflect props when component has a default value', async ({ page }) => {
+      // Disable inputs
+      await page.locator('#disable-button').click();
+
+      // Disabled prop
+      await expect(page.locator('ion-input').first()).toHaveAttribute('disabled', '');
+      await expect(page.locator('ion-input-otp').first()).toHaveAttribute('disabled', '');
+      await expect(page.locator('ion-textarea').first()).toHaveAttribute('disabled', '');
+
+      // Reset disabled state and set readonly state
+      await page.locator('#disable-button').click();
+      await page.locator('#readonly-button').click();
+
+      // Readonly prop
+      await expect(page.locator('ion-input').first()).toHaveAttribute('readonly', '');
+      await expect(page.locator('ion-input-otp').first()).toHaveAttribute('readonly', '');
+      await expect(page.locator('ion-textarea').first()).toHaveAttribute('readonly', '');
+    });
   });
 
   test.describe('updating text input refs', () => {

packages/angular/test/base/e2e/src/standalone/inputs.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Inputs', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/standalone/inputs');
+  });
+
+  test.describe('basic functionality', () => {
+    test('should reflect props when component has a default value', async ({ page }) => {
+      // Disable inputs
+      await page.locator('#disable-button').click();
+
+      // Disabled prop
+      await expect(page.locator('ion-input')).toHaveAttribute('disabled', '');
+      await expect(page.locator('ion-input-otp')).toHaveAttribute('disabled', '');
+      await expect(page.locator('ion-textarea')).toHaveAttribute('disabled', '');
+
+      // Reset disabled state and set readonly state
+      await page.locator('#disable-button').click();
+      await page.locator('#readonly-button').click();
+
+      // Readonly prop
+      await expect(page.locator('ion-input')).toHaveAttribute('readonly', '');
+      await expect(page.locator('ion-input-otp')).toHaveAttribute('readonly', '');
+      await expect(page.locator('ion-textarea')).toHaveAttribute('readonly', '');
+    });
+  });
+});