WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Conversation

@Acentrix-Jordan
Copy link

@Acentrix-Jordan Acentrix-Jordan commented Oct 1, 2025

Scenario

I needed to trigger custom logic after an input field was cleared.

Problem

Currently, there are no built-in events emitted when input actions (such as clearing or copying) occur. This makes it impossible to hook into these behaviors directly.

Discussion opened here: #2013

Solution

I introduced new events that are dispatched using the past-tense form of the corresponding action:

clearable → emits cleared

copyable → emits copied

This naming convention keeps the API intuitive and consistent.

To listen for these events, you can attach them directly in your component:

<flux:input
    id="search"
    name="search"
    icon="magnifying-glass"
    placeholder="Search for an item"
    value="{{ $searchQuery }}"
    clearable
    @cleared="() => console.log('cleared')"
/>

@joshhanley
Copy link
Member

joshhanley commented Oct 1, 2025

@Acentrix-Jordan thanks for the PR! Can you please provide some concrete examples of how and why exactly you would use this? Thanks!

@Acentrix-Jordan
Copy link
Author

Hey @joshhanley thanks for getting back to me.

Here are a few examples where this feature could be really useful.

  1. Resetting data
<flux:input
    id="search"
    name="search"
    clearable
    @cleared="() => resetSearchResults()"
/>

<flux:input
    id="search"
    name="search"
    clearable
    @cleared="() => $wire.emit('resetSearchResults')"
/>
  1. Notifications
<flux:input
    copyable
    @copied="() => showToast('Copied to clipboard!')"
/>
  1. Analytics
<flux:input
    copyable
    value="{{ $referralCode }}"
    @copied="() => trackAnalytics('referral_code_copied')"
/>
  1. Logging
<flux:input
    viewable
    value="{{ $example_secret_val }}"
    @viewed="() => $wire.emit('secret_viewed')"
/>

Admittedly, I'm a little stumped on my own use case of the expanded event, but I'm sure others can come up with something more creative. I was trying to get a full suite; maybe this should be useful for lazy loading content?

@bobik1337
Copy link

Another example here, for my own use:
In date-picker I would like to put 'default' date range after clicking on 'clearable' button

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.

3 participants