fix(ui): add eventListeners to textinput (#482)

deven-org · Feb 8, 2024 · 0b272aa · 0b272aa
1 parent d7f266b
commit 0b272aa
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 44 deletions.
diff --git a/packages/ui-library/src/components/forms/text-input/index.stories.ts b/packages/ui-library/src/components/forms/text-input/index.stories.ts
@@ -4,7 +4,6 @@ import { BlrTextInputRenderFunction } from './renderFunction';
 import { FormSizes, InputTypes } from '../../../globals/constants';
 import { PureIconKeys } from '@boiler/icons';
 import { Themes } from '../../../foundation/_tokens-generated/index.themes';
-import { action } from '@storybook/addon-actions';
 import { html } from 'lit-html';
 
 // this loads the all components instances and registers their html tags
@@ -323,57 +322,25 @@ Text Input allows users to enter textual information or data into a designated a
 export const BlrTextInput = (params: BlrTextInputType) => BlrTextInputRenderFunction(params);
 BlrTextInput.storyName = 'Text Input';
 
-const args: BlrTextInputType = {
-  theme: 'Light',
-  size: 'md',
-  type: 'text',
-  placeholder: 'Placeholder-text',
-  value: '',
-  maxLength: 200,
-  hasLabel: true,
-  label: 'Label-text',
-  labelAppendix: '(Appendix)',
-  showInputIcon: true,
-  inputIcon: 'blr360',
-  hasHint: false,
-  hintMessage: 'This is a small hint message',
-  hintIcon: 'blrInfo',
-  disabled: false,
-  readonly: false,
-  required: false,
-  hasError: false,
-  errorMessage: '',
-  errorIcon: undefined,
-  arialabel: 'TextInput',
-  textInputId: 'Input Id',
-  name: 'TextInput',
-  onChange: () => action('onChange'),
-  onSelect: () => action('onSelect'),
-  onFocus: () => action('onFocus'),
-  onBlur: () => action('onBlur'),
-};
-BlrTextInput.args = args;
 // Default parameters for Text Input component
 const defaultParams: BlrTextInputType = {
   size: 'md',
   placeholder: 'Placeholder-text',
   value: '',
   maxLength: 140,
   label: 'Label-text',
-  labelAppendix: '',
+  labelAppendix: '(Appendix)',
   hasHint: false,
   hintMessage: 'This is a small hint message',
   hintIcon: 'blrInfo',
   arialabel: 'TextInput',
-  name: '',
+  name: 'TextInput',
   theme: 'Light',
-  textInputId: '',
+  textInputId: 'Input Id',
   hasLabel: true,
-
   required: false,
   disabled: false,
   readonly: false,
-
   hasError: false,
   errorMessage: '',
   errorIcon: 'blrInfo',
@@ -382,6 +349,8 @@ const defaultParams: BlrTextInputType = {
   showInputIcon: true,
 };
 
+BlrTextInput.args = defaultParams;
+
 //disabledArgTypesTable to deactivate the controls-Panel for a story in storybook
 const argTypesToDisable = [
   'theme',

diff --git a/packages/ui-library/src/components/forms/text-input/index.ts b/packages/ui-library/src/components/forms/text-input/index.ts
@@ -32,10 +32,6 @@ export class BlrTextInput extends LitElement {
   @property() readonly?: boolean;
   @property() size?: FormSizesType = 'md';
   @property() required?: boolean;
-  @property() onChange?: HTMLElement['oninput'];
-  @property() onBlur?: HTMLElement['blur'];
-  @property() onFocus?: HTMLElement['focus'];
-  @property() onSelect?: HTMLElement['onselect'];
   @property() maxLength?: number;
   @property() pattern?: string;
   @property() hasError?: boolean;
@@ -48,9 +44,14 @@ export class BlrTextInput extends LitElement {
   @property() errorIcon?: SizelessIconType;
   @property() hasLabel!: boolean;
   @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 currentType: InputTypes = this.type;
   @state() protected isFocused = false;
 
@@ -59,11 +60,41 @@ export class BlrTextInput extends LitElement {
   };
 
   protected handleFocus = () => {
-    this.isFocused = true;
+    if (!this.disabled) {
+      this.isFocused = true;
+      this.dispatchEvent(
+        new CustomEvent('blrFocus', { bubbles: true, composed: true, detail: { originalEvent: event } })
+      );
+    }
   };
 
   protected handleBlur = () => {
-    this.isFocused = false;
+    if (!this.disabled) {
+      this.isFocused = false;
+      this.dispatchEvent(
+        new CustomEvent('blrBlur', { bubbles: true, composed: true, detail: { originalEvent: event } })
+      );
+    }
+  };
+
+  protected handleChange = (event: Event) => {
+    if (!this.disabled) {
+      this.dispatchEvent(
+        new CustomEvent('blrChange', { 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 },
+        })
+      );
+    }
   };
 
   protected render() {
@@ -158,12 +189,13 @@ export class BlrTextInput extends LitElement {
                 ?disabled="${this.disabled}"
                 ?readonly="${this.readonly}"
                 ?required="${this.required}"
-                @input=${this.onChange}
+                @input=${this.handleChange}
                 @blur=${this.handleBlur}
                 @focus=${this.handleFocus}
                 maxlength="${this.maxLength}"
                 pattern="${this.pattern}"
                 hasError="${this.hasError}"
+                @select=${this.handleSelect}
               />
             </div>
             ${this.showInputIcon && !wasInitialPasswordField && !this.readonly