Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

undo debounce/throttle changes #3108

Merged

Conversation

SteffenDE
Copy link
Collaborator

This reverts the changes made in #3097 and #3033. It adds one small change to the original behavior to clear the throttle timeout on blur.

Relates to: #3097
Relates to: #3033
Relates to: #2318
Relates to: #3076

In #2318 a "bug" was shown where a range input with phx-throttle resets after the DOM is patched. This led me to first try to always run the event callback on blur (#3033) and later optimized this approach to ensure the last event that was throttled gets emitted at the end of the throttle timeout (#3097). This last one also accidentally introduced a bug where a singular event with phx-throttle would be dispatched again after the throttle timeout (#3105). Also, these changes that are basically only relevant for cases like range inputs complicated the already complicated debounce/throttle code even more.

This PR adjusts the throttle code in a minimal approach to allow the use cases where the user wants to get the latest value on blur when throttle is used. In these cases, simply adding a phx-blur={JS.dispatch("change")} is the way to go:

<input
  name="tick_frequency"
  type="range"
  min="100"
  max="1000"
  value={@tick_frequency}
  phx-throttle="2000"
  phx-change="change-tick-frequency"
  phx-blur={JS.dispatch("change")}
/>

Relates to: phoenixframework#3097
Relates to: phoenixframework#3033
Relates to: phoenixframework#2318
Relates to: phoenixframework#3076

This reverts the changes made in phoenixframework#3097 and phoenixframework#3033. It adds one small
change to the original behavior to clear the throttle timeout on blur.

For cases where the user wants to get the latest value on blur when
throttle is used, adding a `phx-blur={JS.dispatch("change")}` is the
way to go:

```
<input
  name="tick_frequency"
  type="range"
  min="100"
  max="1000"
  value={@tick_frequency}
  phx-throttle="2000"
  phx-change="change-tick-frequency"
  phx-blur={JS.dispatch("change")}
/>
```
@SteffenDE SteffenDE force-pushed the undo_debounce_throttle_changes branch from 524d0da to 8a6f06a Compare February 10, 2024 11:41
@chrismccord chrismccord merged commit f274943 into phoenixframework:main Feb 14, 2024
5 checks passed
@chrismccord
Copy link
Member

❤️❤️❤️🐥🔥

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants