From fe833711f93bed5d7c43858caae2d526dc250025 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 18 Dec 2023 12:34:16 -0500
Subject: [PATCH 1/4] docs: account for this context

---
 core/src/components.d.ts                  | 20 ++++++++++----------
 core/src/components/datetime/datetime.tsx |  4 ++++
 core/src/components/input/input.tsx       |  4 ++++
 core/src/components/modal/modal.tsx       |  4 ++++
 core/src/components/range/range.tsx       |  4 ++++
 core/src/components/textarea/textarea.tsx |  4 ++++
 6 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index dcfee8f33e6..5a662f52d10 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -943,7 +943,7 @@ export namespace Components {
          */
         "size": 'cover' | 'fixed';
         /**
-          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
+          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to titleSelectedDatesFormatter.
          */
         "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
         /**
@@ -1182,7 +1182,7 @@ export namespace Components {
          */
         "counter": boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to counterFormatter.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -1701,7 +1701,7 @@ export namespace Components {
          */
         "breakpoints"?: number[];
         /**
-          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
+          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  Developers passing a function who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to canDismiss.
          */
         "canDismiss": boolean | ((data?: any, role?: string) => Promise<boolean>);
         /**
@@ -2336,7 +2336,7 @@ export namespace Components {
          */
         "pin": boolean;
         /**
-          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.
+          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to pinFormatter.
          */
         "pinFormatter": PinFormatter;
         /**
@@ -2974,7 +2974,7 @@ export namespace Components {
          */
         "counter": boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to counterFormatter.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -5646,7 +5646,7 @@ declare namespace LocalJSX {
          */
         "size"?: 'cover' | 'fixed';
         /**
-          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
+          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to titleSelectedDatesFormatter.
          */
         "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
         /**
@@ -5897,7 +5897,7 @@ declare namespace LocalJSX {
          */
         "counter"?: boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to counterFormatter.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -6428,7 +6428,7 @@ declare namespace LocalJSX {
          */
         "breakpoints"?: number[];
         /**
-          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
+          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  Developers passing a function who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to canDismiss.
          */
         "canDismiss"?: boolean | ((data?: any, role?: string) => Promise<boolean>);
         /**
@@ -7060,7 +7060,7 @@ declare namespace LocalJSX {
          */
         "pin"?: boolean;
         /**
-          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.
+          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to pinFormatter.
          */
         "pinFormatter"?: PinFormatter;
         /**
@@ -7750,7 +7750,7 @@ declare namespace LocalJSX {
          */
         "counter"?: boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to counterFormatter.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index bffcc8942cb..3e9ad0c6e41 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -341,6 +341,10 @@ export class Datetime implements ComponentInterface {
    * dates are selected. Only used if there are 0 or more than 1
    * selected (i.e. unused for exactly 1). By default, the header
    * text is set to "numberOfDates days".
+   *
+   * Developers who wish to access "this" inside of the function
+   * should either use an arrow function or manually bind "this"
+   * using `.bind(this)` when passing the function to titleSelectedDatesFormatter.
    */
   @Prop() titleSelectedDatesFormatter?: TitleSelectedDatesFormatter;
 
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index d28cfd385c8..b9d9df917fa 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -121,6 +121,10 @@ export class Input implements ComponentInterface {
   /**
    * A callback used to format the counter text.
    * By default the counter text is set to "itemLength / maxLength".
+   *
+   * Developers who wish to access "this" inside of the function
+   * should either use an arrow function or manually bind "this"
+   * using `.bind(this)` when passing the function to counterFormatter.
    */
   @Prop() counterFormatter?: (inputLength: number, maxLength: number) => string;
 
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index ef6114b18ba..d8fedd6ed54 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -264,6 +264,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
    *
    * If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.
    * If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
+   *
+   * Developers passing a function who wish to access "this" inside of the function
+   * should either use an arrow function or manually bind "this"
+   * using `.bind(this)` when passing the function to canDismiss.
    */
   @Prop() canDismiss: boolean | ((data?: any, role?: string) => Promise<boolean>) = true;
 
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 5b017cf464a..45977ca7b4e 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -141,6 +141,10 @@ export class Range implements ComponentInterface {
   /**
    * A callback used to format the pin text.
    * By default the pin text is set to `Math.round(value)`.
+   *
+   * Developers who wish to access "this" inside of the function
+   * should either use an arrow function or manually bind "this"
+   * using `.bind(this)` when passing the function to pinFormatter.
    */
   @Prop() pinFormatter: PinFormatter = (value: number): number => Math.round(value);
 
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 83557d3254f..a48b3049c18 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -222,6 +222,10 @@ export class Textarea implements ComponentInterface {
   /**
    * A callback used to format the counter text.
    * By default the counter text is set to "itemLength / maxLength".
+   *
+   * Developers who wish to access "this" inside of the function
+   * should either use an arrow function or manually bind "this"
+   * using `.bind(this)` when passing the function to counterFormatter.
    */
   @Prop() counterFormatter?: (inputLength: number, maxLength: number) => string;
 

From 2ebccaf79879e5e04fcc28ada8ac271c55b1fa32 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 18 Dec 2023 15:19:00 -0500
Subject: [PATCH 2/4] clean up documentation

---
 core/src/components.d.ts                  | 16 ++++++++--------
 core/src/components/datetime/datetime.tsx |  5 ++---
 core/src/components/input/input.tsx       |  5 ++---
 core/src/components/range/range.tsx       |  5 ++---
 core/src/components/textarea/textarea.tsx |  5 ++---
 5 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 5a662f52d10..e40beac7e8a 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -943,7 +943,7 @@ export namespace Components {
          */
         "size": 'cover' | 'fixed';
         /**
-          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to titleSelectedDatesFormatter.
+          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
         /**
@@ -1182,7 +1182,7 @@ export namespace Components {
          */
         "counter": boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to counterFormatter.
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -2336,7 +2336,7 @@ export namespace Components {
          */
         "pin": boolean;
         /**
-          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to pinFormatter.
+          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "pinFormatter": PinFormatter;
         /**
@@ -2974,7 +2974,7 @@ export namespace Components {
          */
         "counter": boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to counterFormatter.
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -5646,7 +5646,7 @@ declare namespace LocalJSX {
          */
         "size"?: 'cover' | 'fixed';
         /**
-          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to titleSelectedDatesFormatter.
+          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
         /**
@@ -5897,7 +5897,7 @@ declare namespace LocalJSX {
          */
         "counter"?: boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to counterFormatter.
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -7060,7 +7060,7 @@ declare namespace LocalJSX {
          */
         "pin"?: boolean;
         /**
-          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to pinFormatter.
+          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "pinFormatter"?: PinFormatter;
         /**
@@ -7750,7 +7750,7 @@ declare namespace LocalJSX {
          */
         "counter"?: boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  Developers who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to counterFormatter.
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 3e9ad0c6e41..77a8727f64f 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -342,9 +342,8 @@ export class Datetime implements ComponentInterface {
    * selected (i.e. unused for exactly 1). By default, the header
    * text is set to "numberOfDates days".
    *
-   * Developers who wish to access "this" inside of the function
-   * should either use an arrow function or manually bind "this"
-   * using `.bind(this)` when passing the function to titleSelectedDatesFormatter.
+   * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+   * if you need to access `this` from within the callback.
    */
   @Prop() titleSelectedDatesFormatter?: TitleSelectedDatesFormatter;
 
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index b9d9df917fa..3607b103221 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -122,9 +122,8 @@ export class Input implements ComponentInterface {
    * A callback used to format the counter text.
    * By default the counter text is set to "itemLength / maxLength".
    *
-   * Developers who wish to access "this" inside of the function
-   * should either use an arrow function or manually bind "this"
-   * using `.bind(this)` when passing the function to counterFormatter.
+   * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+   * if you need to access `this` from within the callback.
    */
   @Prop() counterFormatter?: (inputLength: number, maxLength: number) => string;
 
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 45977ca7b4e..1df4ed9c3f5 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -142,9 +142,8 @@ export class Range implements ComponentInterface {
    * A callback used to format the pin text.
    * By default the pin text is set to `Math.round(value)`.
    *
-   * Developers who wish to access "this" inside of the function
-   * should either use an arrow function or manually bind "this"
-   * using `.bind(this)` when passing the function to pinFormatter.
+   * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+   * if you need to access `this` from within the callback.
    */
   @Prop() pinFormatter: PinFormatter = (value: number): number => Math.round(value);
 
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index a48b3049c18..6684d09906b 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -223,9 +223,8 @@ export class Textarea implements ComponentInterface {
    * A callback used to format the counter text.
    * By default the counter text is set to "itemLength / maxLength".
    *
-   * Developers who wish to access "this" inside of the function
-   * should either use an arrow function or manually bind "this"
-   * using `.bind(this)` when passing the function to counterFormatter.
+   * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+   * if you need to access `this` from within the callback.
    */
   @Prop() counterFormatter?: (inputLength: number, maxLength: number) => string;
 

From e91c5bfe64230c8e49cf47b45d09904bc2a7daf8 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 19 Dec 2023 17:16:52 -0500
Subject: [PATCH 3/4] Update core/src/components/modal/modal.tsx

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
---
 core/src/components/modal/modal.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index d8fedd6ed54..bae8648d765 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -265,9 +265,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
    * If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.
    * If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
    *
-   * Developers passing a function who wish to access "this" inside of the function
-   * should either use an arrow function or manually bind "this"
-   * using `.bind(this)` when passing the function to canDismiss.
+   * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+   * if you need to access `this` from within the callback.
    */
   @Prop() canDismiss: boolean | ((data?: any, role?: string) => Promise<boolean>) = true;
 

From f1a362acf27663a29de3159f0edcd9da7ec1d965 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 19 Dec 2023 17:23:17 -0500
Subject: [PATCH 4/4] run build

---
 core/src/components.d.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index e40beac7e8a..ebcd7886b6f 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1701,7 +1701,7 @@ export namespace Components {
          */
         "breakpoints"?: number[];
         /**
-          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  Developers passing a function who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to canDismiss.
+          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "canDismiss": boolean | ((data?: any, role?: string) => Promise<boolean>);
         /**
@@ -6428,7 +6428,7 @@ declare namespace LocalJSX {
          */
         "breakpoints"?: number[];
         /**
-          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  Developers passing a function who wish to access "this" inside of the function should either use an arrow function or manually bind "this" using `.bind(this)` when passing the function to canDismiss.
+          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "canDismiss"?: boolean | ((data?: any, role?: string) => Promise<boolean>);
         /**