Skip to content

Instantly share code, notes, and snippets.

@weaverryan
Last active May 27, 2022
Embed
What would you like to do?
Update: stimulus-autocomplete + stimulus-use transition for SymfonyCasts Tutorial
import { useTransition } from 'stimulus-use';
export function addFadeTransition(controller, element) {
useTransition(controller, {
element,
enterActive: 'fade-enter-active',
enterFrom: 'fade-enter-from',
enterTo: 'fade-enter-to',
leaveActive: 'fade-leave-active',
leaveFrom: 'fade-leave-from',
leaveTo: 'fade-leave-to',
hiddenClass: 'd-none',
});
}
import { Controller } from '@hotwired/stimulus';
import { addFadeTransition } from '../util/add-transition';
import { Autocomplete } from 'stimulus-autocomplete';
export default class extends Autocomplete {
static targets = ['results'];
areResultsShown = false;
connect() {
addFadeTransition(this, this.resultsTarget);
super.connect();
}
set resultsShown(value) {
this.areResultsShown = value;
}
get resultsShown() {
return this.areResultsShown
}
open() {
super.open();
this.enter();
}
close() {
super.close();
this.leave();
}
}
<div
class="input-group"
{{ stimulus_controller({
'autocomplete-transition': {
url: path('app_homepage', { preview: 1 })
}
}) }}
>
<input
name="q"
value="{{ searchTerm }}"
placeholder="Search products..."
type="search"
class="form-control"
{{ stimulus_target('autocomplete-transition', 'input') }}
>
<div
class="search-preview"
data-autocomplete-transition-target="results"
></div>
</div>
{
"devDependencies": {
"ONLY SHOWING RELEVANT PACKAGE VERSIONS FOR THIS EXAMPLE": "",
"@hotwired/stimulus": "^3.0.0",
"@symfony/stimulus-bridge": "^3.0.0",
"stimulus-autocomplete": "^3.0.2",
"stimulus-use": "^0.50.0-2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment