fix(ui): add eventListeners to textarea (#485)

deven-org · Feb 6, 2024 · 0aee72e · 0aee72e
1 parent 3a83321
commit 0aee72e
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 52 deletions.
diff --git a/packages/ui-library/src/components/forms/textarea/index.stories.ts b/packages/ui-library/src/components/forms/textarea/index.stories.ts
@@ -25,31 +25,30 @@ const sharedStyles = html`
 // Default parameters for Textarea component
 const defaultParams: BlrTextareaType = {
   size: 'md',
-  isResizeable: 'none',
+  isResizeable: 'both',
   cols: 40,
   rows: 4,
   placeholder: 'Placeholder-text',
   value: '',
   minLength: 10,
   maxLength: 140,
+  hasLabel: true,
   label: 'Label-text',
-  labelAppendix: '',
+  labelAppendix: '(Appendix)',
   hasHint: false,
-  hintMessage: 'This is a small hint',
+  hintMessage: 'This is a small hint message',
   hintIcon: 'blrInfo',
-  arialabel: '',
-  name: '',
-  showCounter: false,
+  arialabel: 'Text Area',
+  name: 'Text Area',
+  showCounter: true,
   theme: 'Light',
-  textareaId: '',
+  textareaId: '#textAreaId',
   warningLimitType: 'warningLimitInt',
   warningLimitInt: 105,
   warningLimitPer: 75,
-
   required: false,
   disabled: false,
   readonly: false,
-
   hasError: false,
   errorMessage: '',
   errorIcon: 'blr360',
@@ -414,41 +413,8 @@ export const TextArea = (params: BlrTextareaType) =>
         ...params,
       })}
     </div> `;
-const args: BlrTextareaType = {
-  theme: 'Light',
-  size: 'md',
-  isResizeable: 'both',
-  cols: 40,
-  rows: 4,
-  placeholder: 'Placeholder-text',
-  value: '',
-  minLength: 0,
-  maxLength: 140,
-  hasLabel: true,
-  label: 'Label-text',
-  labelAppendix: '(Appendix)',
-  hasHint: false,
-  hintMessage: 'This is a small hint message',
-  hintIcon: 'blrInfo',
-  showCounter: true,
-  warningLimitType: 'warningLimitInt',
-  warningLimitInt: 105,
-  warningLimitPer: 75,
-  disabled: false,
-  readonly: false,
-  required: false,
-  hasError: false,
-  errorMessage: '',
-  errorIcon: undefined,
-  arialabel: 'Text Area',
-  textareaId: '#textAreaId',
-  name: 'Text Area',
-  onChange: () => action('onChange'),
-  onFocus: () => action('onFocus'),
-  onSelect: () => action('onSelect'),
-  onBlur: () => action('onBlur'),
-};
-TextArea.args = args;
+
+TextArea.args = defaultParams;
 
 //disabledArgTypesTable to deactivate the controls-Panel for a story in storybook
 const argTypesToDisable = [

diff --git a/packages/ui-library/src/components/forms/textarea/index.ts b/packages/ui-library/src/components/forms/textarea/index.ts
@@ -29,9 +29,6 @@ export class BlrTextarea extends LitElement {
   @property() hasLabel?: boolean;
   @property() size?: FormSizesType = 'md';
   @property() required?: boolean;
-  @property() onChange?: HTMLElement['oninput'];
-  @property() onBlur?: HTMLElement['blur'];
-  @property() onFocus?: HTMLElement['focus'];
   @property() maxLength?: number;
   @property() minLength?: number;
   @property() warningLimitType: WarningLimits = 'warningLimitInt';
@@ -49,10 +46,15 @@ export class BlrTextarea extends LitElement {
   @property() isResizeable: ResizeType = 'none';
   @property() rows?: number;
   @property() cols?: number;
-  @property() onSelect?: HTMLElement['onselect'];
   @property() name?: string;
   @property() theme: ThemeType = 'Light';
 
+  // these are not triggered directly but allows us to map it internally and bve typesafe
+  @property() blrFocus?: () => void;
+  @property() blrBlur?: () => void;
+  @property() blrChange?: () => void;
+  @property() blrSelect?: () => void;
+
   @state() protected count = 0;
   @query('textarea') protected textareaElement: HTMLTextAreaElement | undefined;
 
@@ -105,6 +107,42 @@ export class BlrTextarea extends LitElement {
     return counterVariant;
   }
 
+  protected handleChange = (event: Event) => {
+    if (!this.disabled) {
+      this.dispatchEvent(
+        new CustomEvent('blrChange', { bubbles: true, composed: true, detail: { originalEvent: event } })
+      );
+    }
+  };
+
+  protected handleFocus = (event: Event) => {
+    if (!this.disabled) {
+      this.dispatchEvent(
+        new CustomEvent('blrFocus', { bubbles: true, composed: true, detail: { originalEvent: event } })
+      );
+    }
+  };
+
+  protected handleBlur = (event: Event) => {
+    if (!this.disabled) {
+      this.dispatchEvent(
+        new CustomEvent('blrBlur', { bubbles: true, composed: true, detail: { originalEvent: event } })
+      );
+    }
+  };
+
+  protected handleSelect = (event: Event) => {
+    if (!this.disabled) {
+      this.dispatchEvent(
+        new CustomEvent('blrSelect', {
+          bubbles: true,
+          composed: true,
+          detail: { originalEvent: event, value: this.textareaElement?.value },
+        })
+      );
+    }
+  };
+
   protected render() {
     if (this.size) {
       const dynamicStyles = this.theme === 'Light' ? [formLight, textAreaLight] : [formDark, textAreaDark];
@@ -184,10 +222,10 @@ export class BlrTextarea extends LitElement {
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             ?readonly="${this.readonly}"
-            @input="${this.onChange}"
-            @focus=${this.focus}
-            @blur=${this.blur}
-            @select="${this.onSelect}"
+            @input=${this.handleChange}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+            @select=${this.handleSelect}
             @keyup=${this.updateCounter}
           >
 ${this.value}