Allow dispatch target type to not be the same as the controller element type
lb- opened this issue · comments
Summary
When using generics to declare a more specific element type on the controller, the dispatch
target type is linked to that same type and it is no longer possible (without overrides or type checking warnings) to dispatch against a target of any kind of element.
Not sure if this is a bug but it is probably an unintended side effect of allowing a type signature for controllers via generics completed in #529
Steps to reproduce
- Create a new controller (TypeScript) similar to this, where the Controller's type is
HTMLInputElement
(e.g. not a genericElement
orHTMLElement
.
import { Controller } from '@hotwired/stimulus';
export class ExampleController extends Controller<HTMLInputElement> {
connect() {
const main = document.querySelector('main') as HTMLElement;
this.dispatch('Connected!', { target: main });
}
}
-
Expected: I should be able to use the documented
dispatch
callback with any target element - as per https://stimulus.hotwired.dev/reference/controllers#cross-controller-coordination-with-events (seedispatch accepts additional options as the second parameter as follows:
) -
Actual: I get a type error advising that the dispatch target element
HTMLElement
does not match theHTMLInputElement
type.
Type 'HTMLElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 53 more.ts(2740)
A similar issue also happens if we were to pass in something like document
to the target.
Screenshots
Potential solution
Allow the target
type to be something like:
target?: ElementType | Element;
stimulus/src/core/controller.ts
Line 82 in eedb8ed
dispatch(
eventName: string,
{ target = this.element, detail = {}, prefix = this.identifier, bubbles = true, cancelable = true } = {}
) {
const type = prefix ? `${prefix}:${eventName}` : eventName
const event = new CustomEvent(type, { detail, bubbles, cancelable })
target.dispatchEvent(event)
return event
}
Awesome. Thank you