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?

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