Hi!

This closes #59.

I've created 3 clean commits to show the incremental progress - I have tried to change as little as possible:

1. The controller already has open() and close() methods, but they were not consistently called. The first commit always calls these methods when opening or closing the element. This means that the toggle event is now dispatched in open/close situations when it wasn't before, but I think this is a bug fix :). The docs state that the toggle event "fires when the results element is shown or hidden". I also added a new action key to the event set to open or close so that a listener can determine what's happening.

2. Added a this.isHidden property to the controller to track the "is hidden" state, instead of relying on this.resultsTarget.hidden.

3. Added a new skipHiddenProperty value that can be set if you want to avoid this.resultsTarget.hidden from being set (because you want to handle hiding/showing yourself).

The end result of this is that a user can now leverage use-transition to add, for example, a fade-in/out for this auto-complete. I'll include that example code below in case anyone is interested :).

Thanks!

Transitions with stimulus-use

A) The HTML:

<div
    data-controller="autocomplete autocomplete-transition"
    data-autocomplete-url-value="/some/url"
    data-autocomplete-skip-hidden-property-value="1"
    data-action="toggle->autocomplete-transition#toggle"
>
    <input data-autocomplete-target="input">

    <div
        data-autocomplete-target="results"
        data-autocomplete-transition-target="results">
    </div>
</div>

B) Custom autocomplete-transition controller:

import { Controller } from 'stimulus';
import { useTransition } from 'stimulus-use';

export default class extends Controller {
    static targets = ['results'];

    connect() {
        useTransition(this, {
            element: this.resultsTarget,
            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',
        });
    }

    toggle(event) {
        if (event.detail.action === 'open') {
            this.enter();
        } else {
            this.leave();
        }
    }
}

C) Some fade out / fade in CSS

.fade-enter-active, .fade-leave-active {
    transition: opacity 2000ms;
}
.fade-enter-from, .fade-leave-to {
    opacity: 0;
}
.fade-enter-to, .fade-leave-from {
    opacity: 1;
}