Skip to content

Commit fe3c3d5

Browse files
authored
docs(input, searchbar, textarea): improve docs for managing focus (#28614)
Issue number: Related to #18132 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The documentation about the `autofocus` prop is unclear and does not accurately reflect how it actually works across browsers and devices. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The documentation for `autofocus` and `setFocus` are more detailed. - The documentation links to the relevant page in the docs. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
1 parent 1705d06 commit fe3c3d5

File tree

4 files changed

+19
-9
lines changed

4 files changed

+19
-9
lines changed

core/src/components.d.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1162,7 +1162,7 @@ export namespace Components {
11621162
*/
11631163
"autocorrect": 'on' | 'off';
11641164
/**
1165-
* This Boolean attribute lets you specify that a form control should have input focus when the page loads.
1165+
* Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element. This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
11661166
*/
11671167
"autofocus": boolean;
11681168
/**
@@ -1274,7 +1274,7 @@ export namespace Components {
12741274
*/
12751275
"required": boolean;
12761276
/**
1277-
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`. Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method. Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.
1277+
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`. Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method. Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved. See [managing focus](/docs/developing/managing-focus) for more information.
12781278
*/
12791279
"setFocus": () => Promise<void>;
12801280
/**
@@ -2601,7 +2601,7 @@ export namespace Components {
26012601
*/
26022602
"searchIcon"?: string;
26032603
/**
2604-
* Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`. Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method. Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.
2604+
* Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`. Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method. Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved. See [managing focus](/docs/developing/managing-focus) for more information.
26052605
*/
26062606
"setFocus": () => Promise<void>;
26072607
/**
@@ -2950,7 +2950,7 @@ export namespace Components {
29502950
*/
29512951
"autocapitalize": string;
29522952
/**
2953-
* This Boolean attribute lets you specify that a form control should have input focus when the page loads.
2953+
* Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element. This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
29542954
*/
29552955
"autofocus": boolean;
29562956
/**
@@ -3050,7 +3050,7 @@ export namespace Components {
30503050
*/
30513051
"rows"?: number;
30523052
/**
3053-
* Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.
3053+
* Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`. See [managing focus](/docs/developing/managing-focus) for more information.
30543054
*/
30553055
"setFocus": () => Promise<void>;
30563056
/**
@@ -5854,7 +5854,7 @@ declare namespace LocalJSX {
58545854
*/
58555855
"autocorrect"?: 'on' | 'off';
58565856
/**
5857-
* This Boolean attribute lets you specify that a form control should have input focus when the page loads.
5857+
* Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element. This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
58585858
*/
58595859
"autofocus"?: boolean;
58605860
/**
@@ -7699,7 +7699,7 @@ declare namespace LocalJSX {
76997699
*/
77007700
"autocapitalize"?: string;
77017701
/**
7702-
* This Boolean attribute lets you specify that a form control should have input focus when the page loads.
7702+
* Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element. This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
77037703
*/
77047704
"autofocus"?: boolean;
77057705
/**

core/src/components/input/input.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,9 @@ export class Input implements ComponentInterface {
9595
@Prop() autocorrect: 'on' | 'off' = 'off';
9696

9797
/**
98-
* This Boolean attribute lets you specify that a form control should have input focus when the page loads.
98+
* Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
99+
*
100+
* This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
99101
*/
100102
@Prop() autofocus = false;
101103

@@ -424,6 +426,8 @@ export class Input implements ComponentInterface {
424426
*
425427
* Developers who wish to focus an input when an overlay is presented
426428
* should call `setFocus` after `didPresent` has resolved.
429+
*
430+
* See [managing focus](/docs/developing/managing-focus) for more information.
427431
*/
428432
@Method()
429433
async setFocus() {

core/src/components/searchbar/searchbar.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,8 @@ export class Searchbar implements ComponentInterface {
257257
*
258258
* Developers who wish to focus an input when an overlay is presented
259259
* should call `setFocus` after `didPresent` has resolved.
260+
*
261+
* See [managing focus](/docs/developing/managing-focus) for more information.
260262
*/
261263
@Method()
262264
async setFocus() {

core/src/components/textarea/textarea.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,9 @@ export class Textarea implements ComponentInterface {
9393
@Prop() autocapitalize = 'none';
9494

9595
/**
96-
* This Boolean attribute lets you specify that a form control should have input focus when the page loads.
96+
* Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
97+
*
98+
* This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
9799
*/
98100
@Prop() autofocus = false;
99101

@@ -372,6 +374,8 @@ export class Textarea implements ComponentInterface {
372374
/**
373375
* Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
374376
* `textarea.focus()`.
377+
*
378+
* See [managing focus](/docs/developing/managing-focus) for more information.
375379
*/
376380
@Method()
377381
async setFocus() {

0 commit comments

Comments
 (0)