Skip to content

Commit 424537a

Browse files
nmergetmfranzke
nmerget
and
mfranzke
authored
fix: removed stopPropagation for every event to fix issue with <form> (#4280)
Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
1 parent 171eb62 commit 424537a

File tree

12 files changed

+13
-30
lines changed

12 files changed

+13
-30
lines changed

‎packages/components/src/components/button/button.lite.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export default function DBButton(props: DBButtonProps) {
2323
const state = useStore<DBButtonState>({
2424
handleClick: (event: ClickEvent<HTMLButtonElement>) => {
2525
if (props.onClick) {
26-
event.stopPropagation();
2726
props.onClick(event);
2827
}
2928
}

‎packages/components/src/components/card/card.lite.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export default function DBCard(props: DBCardProps) {
1818
const state = useStore<DBCardState>({
1919
handleClick: (event: ClickEvent<HTMLElement>) => {
2020
if (props.onClick) {
21-
event.stopPropagation();
2221
props.onClick(event);
2322
}
2423
}

‎packages/components/src/components/checkbox/checkbox.lite.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,6 @@ export default function DBCheckbox(props: DBCheckboxProps) {
8585
}
8686
},
8787
handleChange: (event: ChangeEvent<HTMLInputElement>) => {
88-
event.stopPropagation();
8988
if (props.onChange) {
9089
props.onChange(event);
9190
}
@@ -98,13 +97,11 @@ export default function DBCheckbox(props: DBCheckboxProps) {
9897
state.handleValidation();
9998
},
10099
handleBlur: (event: InteractionEvent<HTMLInputElement> | any) => {
101-
event.stopPropagation();
102100
if (props.onBlur) {
103101
props.onBlur(event);
104102
}
105103
},
106104
handleFocus: (event: InteractionEvent<HTMLInputElement> | any) => {
107-
event.stopPropagation();
108105
if (props.onFocus) {
109106
props.onFocus(event);
110107
}

‎packages/components/src/components/drawer/drawer.lite.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,17 @@ export default function DBDrawer(props: DBDrawerProps) {
2121
const dialogContainerRef = useRef<HTMLDivElement | any>(null);
2222
const state = useStore<DBDrawerState>({
2323
// eslint-disable-next-line @typescript-eslint/no-explicit-any
24-
handleClose: (event: any) => {
24+
handleClose: (event: any, forceClose?: boolean) => {
2525
if (event.key === 'Escape') {
2626
event.preventDefault();
2727
}
2828

29+
if (forceClose) {
30+
event.stopPropagation();
31+
}
32+
2933
if (
30-
event === 'close' ||
34+
forceClose ||
3135
event.key === 'Escape' ||
3236
(event.target.nodeName === 'DIALOG' &&
3337
event.type === 'click' &&
@@ -103,7 +107,7 @@ export default function DBDrawer(props: DBDrawerProps) {
103107
icon="cross"
104108
variant="ghost"
105109
noText
106-
onClick={() => state.handleClose('close')}>
110+
onClick={(event) => state.handleClose(event, true)}>
107111
{props.closeButtonText ?? DEFAULT_CLOSE_BUTTON}
108112
</DBButton>
109113
</header>

‎packages/components/src/components/header/header.lite.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,11 @@ export default function DBHeader(props: DBHeaderProps) {
2525
_id: DEFAULT_ID,
2626
initialized: false,
2727
forcedToMobile: false,
28-
handleToggle: () => {
28+
handleToggle: (event?: any) => {
29+
if (event && event.stopPropagation) {
30+
event.stopPropagation();
31+
}
32+
2933
const open = !getBoolean(props.drawerOpen, 'drawerOpen');
3034

3135
if (props.onToggle) {

‎packages/components/src/components/input/input.lite.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,6 @@ export default function DBInput(props: DBInputProps) {
101101
}
102102
},
103103
handleInput: (event: InputEvent<HTMLInputElement>) => {
104-
event.stopPropagation();
105104
useTarget({
106105
vue: () => {
107106
if (props.input) {
@@ -125,7 +124,6 @@ export default function DBInput(props: DBInputProps) {
125124
state.handleValidation();
126125
},
127126
handleChange: (event: ChangeEvent<HTMLInputElement>) => {
128-
event.stopPropagation();
129127
if (props.onChange) {
130128
props.onChange(event);
131129
}
@@ -137,13 +135,11 @@ export default function DBInput(props: DBInputProps) {
137135
state.handleValidation();
138136
},
139137
handleBlur: (event: InteractionEvent<HTMLInputElement> | any) => {
140-
event.stopPropagation();
141138
if (props.onBlur) {
142139
props.onBlur(event);
143140
}
144141
},
145142
handleFocus: (event: InteractionEvent<HTMLInputElement> | any) => {
146-
event.stopPropagation();
147143
if (props.onFocus) {
148144
props.onFocus(event);
149145
}

‎packages/components/src/components/link/link.lite.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ export default function DBLink(props: DBLinkProps) {
1919
const state = useStore<DBLinkState>({
2020
handleClick: (event: ClickEvent<HTMLAnchorElement>) => {
2121
if (props.onClick) {
22-
event.stopPropagation();
2322
props.onClick(event);
2423
}
2524
}

‎packages/components/src/components/radio/radio.lite.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export default function DBRadio(props: DBRadioProps) {
3030
initialized: false,
3131
_id: undefined,
3232
handleChange: (event: ChangeEvent<HTMLInputElement> | any) => {
33-
event.stopPropagation();
3433
if (props.onChange) {
3534
props.onChange(event);
3635
}
@@ -41,13 +40,11 @@ export default function DBRadio(props: DBRadioProps) {
4140
});
4241
},
4342
handleBlur: (event: InteractionEvent<HTMLInputElement> | any) => {
44-
event.stopPropagation();
4543
if (props.onBlur) {
4644
props.onBlur(event);
4745
}
4846
},
4947
handleFocus: (event: InteractionEvent<HTMLInputElement> | any) => {
50-
event.stopPropagation();
5148
if (props.onFocus) {
5249
props.onFocus(event);
5350
}

‎packages/components/src/components/select/select.lite.tsx

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -96,12 +96,10 @@ export default function DBSelect(props: DBSelectProps) {
9696
},
9797
handleClick: (event: ClickEvent<HTMLSelectElement> | any) => {
9898
if (props.onClick) {
99-
event.stopPropagation();
10099
props.onClick(event);
101100
}
102101
},
103102
handleInput: (event: InputEvent<HTMLSelectElement> | any) => {
104-
event.stopPropagation();
105103
useTarget({
106104
vue: () => {
107105
if (props.input) {
@@ -125,7 +123,6 @@ export default function DBSelect(props: DBSelectProps) {
125123
state.handleValidation();
126124
},
127125
handleChange: (event: ChangeEvent<HTMLSelectElement> | any) => {
128-
event.stopPropagation();
129126
if (props.onChange) {
130127
props.onChange(event);
131128
}
@@ -137,13 +134,11 @@ export default function DBSelect(props: DBSelectProps) {
137134
state.handleValidation();
138135
},
139136
handleBlur: (event: InteractionEvent<HTMLSelectElement> | any) => {
140-
event.stopPropagation();
141137
if (props.onBlur) {
142138
props.onBlur(event);
143139
}
144140
},
145141
handleFocus: (event: InteractionEvent<HTMLSelectElement> | any) => {
146-
event.stopPropagation();
147142
if (props.onFocus) {
148143
props.onFocus(event);
149144
}

‎packages/components/src/components/switch/switch.lite.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ export default function DBSwitch(props: DBSwitchProps) {
4040
default: false
4141
}),
4242
handleChange: (event: ChangeEvent<HTMLInputElement>) => {
43-
event.stopPropagation();
4443
if (props.onChange) {
4544
props.onChange(event);
4645
}
@@ -55,13 +54,11 @@ export default function DBSwitch(props: DBSwitchProps) {
5554
});
5655
},
5756
handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
58-
event.stopPropagation();
5957
if (props.onBlur) {
6058
props.onBlur(event);
6159
}
6260
},
6361
handleFocus: (event: InteractionEvent<HTMLInputElement>) => {
64-
event.stopPropagation();
6562
if (props.onFocus) {
6663
props.onFocus(event);
6764
}

‎packages/components/src/components/textarea/textarea.lite.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,6 @@ export default function DBTextarea(props: DBTextareaProps) {
8989
}
9090
},
9191
handleInput: (event: InputEvent<HTMLTextAreaElement>) => {
92-
event.stopPropagation();
9392
useTarget({
9493
vue: () => {
9594
if (props.input) {
@@ -112,7 +111,6 @@ export default function DBTextarea(props: DBTextareaProps) {
112111
state.handleValidation();
113112
},
114113
handleChange: (event: ChangeEvent<HTMLTextAreaElement>) => {
115-
event.stopPropagation();
116114
if (props.onChange) {
117115
props.onChange(event);
118116
}
@@ -123,13 +121,11 @@ export default function DBTextarea(props: DBTextareaProps) {
123121
state.handleValidation();
124122
},
125123
handleBlur: (event: InteractionEvent<HTMLTextAreaElement> | any) => {
126-
event.stopPropagation();
127124
if (props.onBlur) {
128125
props.onBlur(event);
129126
}
130127
},
131128
handleFocus: (event: InteractionEvent<HTMLTextAreaElement> | any) => {
132-
event.stopPropagation();
133129
if (props.onFocus) {
134130
props.onFocus(event);
135131
}

‎packages/components/src/shared/model.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -591,7 +591,7 @@ export type CloseEventProps = {
591591
};
592592

593593
export type CloseEventState = {
594-
handleClose: (event: any) => void;
594+
handleClose: (event: any, forceClose?: boolean) => void;
595595
};
596596

597597
export const AlignmentList = ['start', 'center'] as const;

0 commit comments

Comments
 (0)