feat: add title property to input

[d00ML0rDz]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

In the documentation found here regarding the ion-input control it refers in the pattern property that the 'title' prop can be used to describe the pattern to the user so if the pattern does not match their input a custom message can be displayed. However currently when I set this value it doesn't seem to get passed down to the input element tag and remains on the ion-input tag:

<ion-input id="txt-username" value="" pattern="^[a-z0-9]*$" title="Usernames can contain only letters and numbers" placeholder="Username"> <input class="native-input sc-ion-input-ios" aria-labelledby="ion-input-1-lbl" autocapitalize="off" autocomplete="off" autocorrect="off" minlength="3" maxlength="20" name="ion-input-1" pattern="^[a-z0-9]*$" placeholder="Username" required="" spellcheck="false" type="text"> </ion-input>

Expected behavior:

The 'title' property should get moved down to the input element so that when a form is submitted with a value that doesn't match the pattern, the custom error message displays.

Related code:

<IonInput
                            value={username}
                            onIonChange={e => setUsername(e.detail.value!)}
                            required
                            pattern="^[a-z0-9]*$"
                            title="Usernames can contain only letters and numbers"
                            placeholder="Username">
                        </IonInput>

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.11.0 (C:\Users\xxx\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/react 5.3.2

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   NodeJS : v12.18.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.5
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. This has been resolved via #22493, and a fix will be available in an upcoming release of Ionic Framework.

Since title is a global attribute we did not add this as a property. Instead, the attribute that you set on ion-input and ion-textarea is automatically passed to the inner input and textarea elements.

Additionally, this means that title will not show up in the documentation under "Properties" in the same way the global attributes such as id and class do not show up.

Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.