search

nielsfaber / alarmo-card

Home Assistant card for controlling the Alarmo component
98 stars 19 forks source link

bring back the native browser number pad for pincodes on Android #40

Closed RichardDMartinez closed 2 years ago

RichardDMartinez commented 2 years ago

Checklist

Proposal

When the code format is set to pincode in the Alarmo configuration, and the user is on Android, and the Code field is displayed for disarming, and the user clicks on the Code field, have the native browser number pad display, which would be achieved by setting the code field in the alarmo-card to accept only numbers (on stackoverflow this seems achievable by setting inputmode="numeric" in the input field). I have found the native mobile browser keypad is a much more reliable way for users to enter the pin than the HTML keypad. This behavior existed in alarmo-card until v1.2.3. To minimize user confusion, I use card_mod to entirely suppress the HTML keypad, but a setting to entirely suppress the HTML keypad would be a nice extra.

Additional info

With the above setup, the HTML keypad would never display

nielsfaber commented 2 years ago

Alarmo-card uses the following HTML for the textfield: https://github.com/nielsfaber/alarmo-card/blob/25af44f259d5c33661e29836e37c427f4f10c059/src/alarmo-card.ts#L277-L290

So the .inputmode=${this._alarmoConfig?.code_format === FORMAT_NUMBER ? 'numeric' : 'text' should do the magic.

When looking at the native HA alarm panel card: https://github.com/home-assistant/frontend/blob/b1a3996cf1d4920332484243f5de4df78aa3b28d/src/panels/lovelace/cards/hui-alarm-panel-card.ts#L185-L192

It uses the same code (regarding inputmode), so I am not sure whether I can improve anything.

For alarmo-card 1.2.3 and older, the textfield used to be a paper-input: https://github.com/nielsfaber/alarmo-card/blob/cfe826a42166489df49c0bfdb0604a43103e8da7/src/alarmo-card.ts#L200-L213

I was forced to remove it due to the paper elements being removed from HA: https://developers.home-assistant.io/blog/2022/02/18/paper-elements/#:~:text=In%20the%20Home%20Assistant%20Core,require%20updates%20to%20its%20codebase.

It looks like this change has broken the previous functionality. The problem you're having is probably also occuring without using alarmo-card (i.e. using the HA alarm panel card).

The ha-textfield derives from mwc-textfield. It seems to support the inputmode=numeric parameter: https://github.com/material-components/material-web/blob/7438276206d9329210879f270004cb4bb66aa040/packages/textfield/mwc-textfield-base.ts#L97-L99

I don't own an Android device to test. But at this point it's not clear to me what I could improve to facilitate your request.

RichardDMartinez commented 2 years ago

Thank you for the quick reply, Niels. I was able to test the HA alarm card and can confirm it also does not display the number pad on Android. Given the code you provided, perhaps this is an issue I need to open with the HASS team.

Thank you very much.