Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Normalize change and input events across all input components #6233

Merged
merged 2 commits into from
Mar 22, 2024
Merged

Normalize change and input events across all input components #6233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b64adaa
Normalize change and input events across all input components
sdvg Mar 19, 2024
ddf1a04
Order KoliBriEventType properties
sdvg Mar 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions packages/components/src/components/@deprecated/input/controller.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading