Skip to content

Commit

Permalink
Normalize change and input events across all input components (#6233)
Browse files Browse the repository at this point in the history
  • Loading branch information
@deleonio
deleonio authored Mar 22, 2024
2 parents 27c8a4c + ddf1a04 commit 4dcb493
Show file tree
Hide file tree
Showing 26 changed files with 183 additions and 173 deletions.
22 changes: 19 additions & 3 deletions packages/components/src/components/@deprecated/input/controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,9 +151,6 @@ export class InputController extends ControlledInputController implements Watche
// Event handling
tryToDispatchKoliBriEvent('change', this.host, value);

// Static form handling
this.setFormAssociatedValue(value);

// Callback
if (typeof this.component._on?.onChange === 'function') {
/**
Expand Down Expand Up @@ -196,6 +193,24 @@ export class InputController extends ControlledInputController implements Watche
}
}

protected onInput(event: Event, shouldSetFormAssociatedValue = true): void {
const value = (event.target as HTMLInputElement).value;

// Event handling
stopPropagation(event);
tryToDispatchKoliBriEvent('input', this.host);

// Static form handling
if (shouldSetFormAssociatedValue) {
this.setFormAssociatedValue(value);
}

// Callback
if (typeof this.component._on?.onInput === 'function') {
this.component._on.onInput(event);
}
}

public setValue(event: Event, value: string | number | boolean): void {
this.setFormAssociatedValue(value as string);
if (typeof this.component._on?.onChange === 'function') {
Expand All @@ -220,5 +235,6 @@ export class InputController extends ControlledInputController implements Watche
onChange: this.onChange.bind(this),
onClick: this.onClick.bind(this),
onFocus: this.onFocus.bind(this),
onInput: this.onInput.bind(this),
};
}
1 change: 0 additions & 1 deletion packages/components/src/components/input-checkbox/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ export class KolInputCheckbox implements API {
indeterminate: this.state._indeterminate,
}}
data-role={this.state._variant === 'button' ? 'button' : undefined}
onKeyPress={this.state._variant === 'button' ? this.onChange : undefined}
_alert={this.state._alert}
_disabled={this.state._disabled}
_error={this.state._error}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/input-checkbox/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
| `_indeterminate` | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of \_checked. | `boolean \| undefined` | `undefined` |
| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \| undefined` | `undefined` |
| `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` |
| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` |
| `_required` | `_required` | Makes the input element required. | `boolean \| undefined` | `false` |
| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` |
| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` |
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/input-color/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgef
| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \| undefined` | `undefined` |
| `_list` | `_list` | <span style="color:red">**[DEPRECATED]**</span> Use \_suggestions instead.<br/><br/>Deprecated: Gibt die Liste der Vorschlagswörter an. | `W3CInputValue[] \| string \| undefined` | `undefined` |
| `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` |
| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` |
| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (\_hide-label only). | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _accessKey?: string \| undefined; _iconAlign?: AlignPropType \| undefined; _iconOnly?: boolean \| undefined; _icon?: IconsPropType \| undefined; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrentPropType \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: ButtonTypePropType \| undefined; _variant?: ButtonVariantPropType \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; }` | `undefined` |
| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \| string \| undefined` | `undefined` |
| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` |
Expand Down
2 changes: 0 additions & 2 deletions packages/components/src/components/input-date/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,6 @@ export class KolInputDate implements ComponentApi {
form: this.host,
ref: this.ref,
});
} else {
this.controller.onFacade.onChange(event);
}
};

Expand Down
Loading

0 comments on commit 4dcb493

Please sign in to comment.