Skip to content

Commit 6bcefcd

Browse files
authored
docs(button): add comments to renderHiddenButton (#28017)
As part of our incident learning review, the team would like to add better documentation as to the purpose of `renderHiddenButton` for future reference.
1 parent 9016798 commit 6bcefcd

File tree

1 file changed

+16
-0
lines changed

1 file changed

+16
-0
lines changed

core/src/components/button/button.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,15 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
153153
*/
154154
@Event() ionBlur!: EventEmitter<void>;
155155

156+
/**
157+
* This is responsible for rendering a hidden native
158+
* button element inside the associated form. This allows
159+
* users to submit a form by pressing "Enter" when a text
160+
* field inside of the form is focused. The native button
161+
* rendered inside of `ion-button` is in the Shadow DOM
162+
* and therefore does not participate in form submission
163+
* which is why the following code is necessary.
164+
*/
156165
private renderHiddenButton() {
157166
const formEl = (this.formEl = this.findForm());
158167
if (formEl) {
@@ -323,6 +332,13 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
323332
fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
324333
}
325334

335+
/**
336+
* We call renderHiddenButton in the render function to account
337+
* for any properties being set async. For example, changing the
338+
* "type" prop from "button" to "submit" after the component has
339+
* loaded would warrant the hidden button being added to the
340+
* associated form.
341+
*/
326342
{
327343
type !== 'button' && this.renderHiddenButton();
328344
}

0 commit comments

Comments
 (0)