fix(core/select): replace element ref with make-ref function (#1595)

siemens · Dec 6, 2024 · 77f76fe · 77f76fe
1 parent 1c65a17
commit 77f76fe
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 64 deletions.
diff --git a/.changeset/lazy-birds-dream.md b/.changeset/lazy-birds-dream.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+Fix undefined access of **ix-select** during rendering of label
diff --git a/packages/angular/src/control-value-accessors/text-value-accessor.ts b/packages/angular/src/control-value-accessors/text-value-accessor.ts
@@ -11,7 +11,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ValueAccessor } from './value-accessor';
 
 @Directive({
-  selector: 'ix-input,ix-number-input,ix-textarea-field',
+  selector: 'ix-input,ix-number-input,ix-textarea',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -1236,7 +1236,9 @@ export namespace Components {
         "value": string;
     }
     interface IxFieldLabel {
-        "controlRef"?: MakeRef<HTMLElement>;
+        "controlRef"?: | MakeRef<HTMLElement>
+    | MakeRef<HTMLInputElement>
+    | MakeRef<HTMLTextAreaElement>;
         /**
           * The id of the form element that the label is associated with
          */
@@ -1251,7 +1253,9 @@ export namespace Components {
         /**
           * The control element that the label is associated with
          */
-        "controlRef"?: MakeRef<HTMLElement>;
+        "controlRef"?: | MakeRef<HTMLElement>
+    | MakeRef<HTMLInputElement>
+    | MakeRef<HTMLTextAreaElement>;
         /**
           * Show text below the field component
          */
@@ -6340,7 +6344,9 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface IxFieldLabel {
-        "controlRef"?: MakeRef<HTMLElement>;
+        "controlRef"?: | MakeRef<HTMLElement>
+    | MakeRef<HTMLInputElement>
+    | MakeRef<HTMLTextAreaElement>;
         /**
           * The id of the form element that the label is associated with
          */
@@ -6355,7 +6361,9 @@ declare namespace LocalJSX {
         /**
           * The control element that the label is associated with
          */
-        "controlRef"?: MakeRef<HTMLElement>;
+        "controlRef"?: | MakeRef<HTMLElement>
+    | MakeRef<HTMLInputElement>
+    | MakeRef<HTMLTextAreaElement>;
         /**
           * Show text below the field component
          */

diff --git a/packages/core/src/components/date-input/date-input.tsx b/packages/core/src/components/date-input/date-input.tsx
@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { iconCalendar } from '@siemens/ix-icons/icons';
 import {
   AttachInternals,
   Component,
@@ -22,17 +23,16 @@ import {
 } from '@stencil/core';
 import { DateTime } from 'luxon';
 import { dropdownController } from '../dropdown/dropdown-controller';
-import { MakeRef, makeRef } from '../utils/make-ref';
+import { SlotEnd, SlotStart } from '../input/input.fc';
+import { adjustPaddingForStartAndEnd } from '../input/input.util';
 import {
   ClassMutationObserver,
   HookValidationLifecycle,
   IxInputFieldComponent,
   ValidationResults,
   createClassMutationObserver,
 } from '../utils/input';
-import { SlotEnd, SlotStart } from '../input/input.fc';
-import { adjustPaddingForStartAndEnd } from '../input/input.util';
-import { iconCalendar } from '@siemens/ix-icons/icons';
+import { makeRef } from '../utils/make-ref';
 
 export type DateInputValidityState = {
   patternMismatch: boolean;
@@ -435,7 +435,7 @@ export class DateInput implements IxInputFieldComponent<string> {
           validText={this.validText}
           showTextAsTooltip={this.showTextAsTooltip}
           required={this.required}
-          controlRef={this.inputElementRef as unknown as MakeRef<HTMLElement>}
+          controlRef={this.inputElementRef}
         >
           {this.renderInput()}
         </ix-field-wrapper>

diff --git a/packages/core/src/components/field-label/field-label.tsx b/packages/core/src/components/field-label/field-label.tsx
@@ -7,15 +7,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component, Host, Prop, h, Element, Watch } from '@stencil/core';
-import { IxComponent } from '../utils/internal';
+import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
+import { A11yAttributes, a11yHostAttributes } from '../utils/a11y';
 import {
   ClassMutationObserver,
   createClassMutationObserver,
   HTMLIxFormComponentElement,
   isIxInputFieldComponent,
 } from '../utils/input';
-import { A11yAttributes, a11yHostAttributes } from '../utils/a11y';
+import { IxComponent } from '../utils/internal';
 import { MakeRef, makeRef } from '../utils/make-ref';
 
 @Component({
@@ -37,7 +37,10 @@ export class FormFieldLabel implements IxComponent {
   @Prop({ reflect: true }) htmlFor?: string;
 
   /** @internal */
-  @Prop() controlRef?: MakeRef<HTMLElement>;
+  @Prop() controlRef?:
+    | MakeRef<HTMLElement>
+    | MakeRef<HTMLInputElement>
+    | MakeRef<HTMLTextAreaElement>;
 
   /** @internal */
   @Prop({ mutable: true }) isInvalid: boolean = false;

diff --git a/packages/core/src/components/field-wrapper/field-wrapper.tsx b/packages/core/src/components/field-wrapper/field-wrapper.tsx
@@ -88,7 +88,10 @@ export class FieldWrapper implements FieldWrapperInterface {
   /**
    * The control element that the label is associated with
    */
-  @Prop() controlRef?: MakeRef<HTMLElement>;
+  @Prop() controlRef?:
+    | MakeRef<HTMLElement>
+    | MakeRef<HTMLInputElement>
+    | MakeRef<HTMLTextAreaElement>;
 
   private readonly slotRef = makeRef<HTMLDivElement>();
 

diff --git a/packages/core/src/components/input/input.fc.tsx b/packages/core/src/components/input/input.fc.tsx
@@ -45,13 +45,10 @@ export function TextareaElement(props: {
       required={props.required}
       value={props.value}
       placeholder={props.placeholder}
-      onChange={(changeEvent) => {
-        const target = changeEvent.target as HTMLInputElement;
-        props.valueChange(target.value);
-      }}
       onInput={(inputEvent) => {
         const target = inputEvent.target as HTMLInputElement;
         props.updateFormInternalValue(target.value);
+        props.valueChange(target.value);
       }}
       onBlur={() => props.onBlur()}
       style={{
@@ -105,13 +102,10 @@ export function InputElement(props: {
       value={props.value}
       placeholder={props.placeholder}
       onKeyPress={(event) => props.onKeyPress(event)}
-      onChange={(changeEvent) => {
-        const target = changeEvent.target as HTMLInputElement;
-        props.valueChange(target.value);
-      }}
       onInput={(inputEvent) => {
         const target = inputEvent.target as HTMLInputElement;
         props.updateFormInternalValue(target.value);
+        props.valueChange(target.value);
       }}
       onBlur={() => props.onBlur()}
       {...props.ariaAttributes}

diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx
@@ -27,7 +27,7 @@ import {
   IxInputFieldComponent,
   ValidationResults,
 } from '../utils/input';
-import { MakeRef, makeRef } from '../utils/make-ref';
+import { makeRef } from '../utils/make-ref';
 import { InputElement, SlotEnd, SlotStart } from './input.fc';
 import {
   adjustPaddingForStartAndEnd,
@@ -255,7 +255,7 @@ export class Input implements IxInputFieldComponent<string> {
           isValid={this.isValid}
           isInfo={this.isInfo}
           isWarning={this.isWarning}
-          controlRef={this.inputRef as unknown as MakeRef<HTMLElement>}
+          controlRef={this.inputRef}
         >
           <div class="input-wrapper">
             <SlotStart

diff --git a/packages/core/src/components/input/number-input.tsx b/packages/core/src/components/input/number-input.tsx
@@ -25,7 +25,7 @@ import {
   IxInputFieldComponent,
   ValidationResults,
 } from '../utils/input';
-import { MakeRef, makeRef } from '../utils/make-ref';
+import { makeRef } from '../utils/make-ref';
 import { InputElement, SlotEnd, SlotStart } from './input.fc';
 import {
   adjustPaddingForStartAndEnd,
@@ -246,7 +246,7 @@ export class NumberInput implements IxInputFieldComponent<number> {
           isValid={this.isValid}
           isInfo={this.isInfo}
           isWarning={this.isWarning}
-          controlRef={this.inputRef as unknown as MakeRef<HTMLElement>}
+          controlRef={this.inputRef}
         >
           <div
             class={{

diff --git a/packages/core/src/components/input/textarea.tsx b/packages/core/src/components/input/textarea.tsx
@@ -24,7 +24,7 @@ import {
   IxInputFieldComponent,
   ValidationResults,
 } from '../utils/input';
-import { MakeRef, makeRef } from '../utils/make-ref';
+import { makeRef } from '../utils/make-ref';
 import { TextareaElement } from './input.fc';
 import { mapValidationResult, onInputBlur } from './input.util';
 
@@ -235,7 +235,7 @@ export class Textarea implements IxInputFieldComponent<string> {
           isValid={this.isValid}
           isInfo={this.isInfo}
           isWarning={this.isWarning}
-          controlRef={this.textAreaRef as unknown as MakeRef<HTMLElement>}
+          controlRef={this.textAreaRef}
         >
           {!!this.maxLength && this.maxLength > 0 && (
             <ix-typography class="bottom-text" slot="bottom-right" color="soft">