ampproject / ampproject/amphtml
Support focus and blur events
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
## What's the issue?
__Feature request__: support events, at least on input elements (``, ``, ``, etc.), that fire when the element gains or loses focus, similar to the JavaScript `onfocus` and `onblur` event.
A sample use case is having an initially-hidden submit button, which only gets displayed when the text field is non-empty or focused and will get hidden when the input field is empty and loses focus.
Currently, the focus event can be simulated by using `tap` event, but that only works for mouse and not the tab key. Also, If the user presses the mouse inside the input but releases it outside, the action is not considered a `tap`, but the input does gain focus. The blur event is pretty hard to simulate, as the focus can be lost to any other elements.
## How do we reproduce the issue?
The usage can be something like this:
```html
<form ...>
<input type="text" on="change:AMP.setState({empty: !event.value});focus:AMP.setState({focused: true});blur:AMP.setState({focused: false})">
<button id="submit-button" class="jfk-button jfk-button-action" [hidden]="!empty || focused">
Submit
</button>
</form>
```
Contributor guide
Research direction
Start with the issue's input example and inspect how existing change and tap events are handled. Compare the requested focus and blur behavior for input, select, and textarea elements, including keyboard focus and focus loss; done means these events can be used as shown without relying on tap simulation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 40/100