project-error / npwd

NPWD is a FiveM phone resource written entirely in TypeScript and React.
https://projecterror.dev
Other
351 stars 275 forks source link

Fix: Contacts App Input boxes were not disabling key actions #1020

Closed BackSH00TER closed 1 year ago

BackSH00TER commented 1 year ago

Pull Request Description

On the Contacts App, ContactInfo component, the three <Input /> fields were not disabling keys. If a player used WASD it would allow them to walk even while the input had focus, and other keys that were bound would also trigger.

Switched the component to use the <InputBase /> component which is properly handling the keypresses. As a result of changing to this Input box, the component had to have the styles re-applied, so some style override changes were added. BEFORE image

AFTER image

The Search box had the same issue so I used the <SearchField /> component that other apps (like Messaging) are using. BEFORE image

AFTER image

Recording showing that it no longer tries to make you move: https://clipchamp.com/watch/JnjnPZK90pY

Pull Request Checklist:

BackSH00TER commented 1 year ago

This also fixes the issues identified in: https://github.com/project-error/npwd/issues/1016