What is the best way to assign multiple event handlers to Solid.js components within a single HTML element?

Question

What is the best way to assign multiple event handlers to Solid.js components within a single HTML element?

Introduction

I am currently exploring Solid.js and facing a challenge in adding multiple event handlers to the same HTML element from different components using JSX. While it's straightforward in Vue, I have noticed that Solid.js overrides events based on how they are added. I have demonstrated this behavior in both frameworks in an example which you can access here. In Vue, adding multiple event handlers works as expected, but in Solid, any additional event handler seems to override the previous one for a single event.

If you want to compare behaviors, you can toggle between useDivAsComponent in Solid and useDivAsComponent in Vue. Vue consistently handles multiple event handlers attached to a component or HTML element, while Solid's behavior varies depending on where events are added - either to an HTML element or another component.

My question is whether there is a simple way to attach multiple event handlers to the same HTML element using different components defined with JSX in Solid?

Details

In a scenario where I need to add DOM event handlers to the root element of a component, I also want users of the component to be able to append their own DOM event handlers to it. If the root element is like

(props) => <div {...props} />

, only the internal event handlers within the component are effective (external ones will be overruled). This happens because Solid merges props, resulting in only the last event handler being retained instead of utilizing addEventListener.

However, if the component's root element is a standard <div />, Solid generates code in a way that preserves both sets of event handlers. The built code shows Solid using addEventListener(), which aligns with expectations.

Potential Solutions

To work around this issue, one approach could involve passing a reference to the inner component (

<InnerComponent ref={ref} />

) to the parent and manually adding event listeners to prevent additional events from getting overridden (ref.addEventListener(...)). Although effective, this method may not be as user-friendly compared to other frameworks.

Alternatively, ensuring that the inner component where event handlers are applied is a regular <div /> may prompt Solid's compiler to generate code that incorporates event listeners instead of merging (and replacing) event handler props.

I am eager to discover a more seamless way to include multiple events in JSX, if feasible.

javascript jsx solid-js

Answer 1

Answer №1

If you're looking to prevent overwriting events in Solid-js, consider using onmouseleave (in lowercase). This approach will not overwrite existing events but instead "sum" them together since Solid-js interprets lowercase as adding a new event listener. You can find more information about this discussion Here.

In your solid-js example, the implementation would look something like this:

import { render } from 'solid-js/web';
import { Component, JSX } from "solid-js"
type HtmlProps = JSX.HTMLAttributes<HTMLDivElement>

const useDivAsComponent = true

const ComponentInner: Component<HtmlProps> = (props) => {
  const log = (name: string) => console.log("inner", name)
  const Div = (p: HtmlProps) => <div {...p} />
  return useDivAsComponent
     // onmouseenter, onmouseleave, instead of onMouseLeave onMouseEnter
    ? <Div {...props} onmouseenter={[log, "enter"]} onmouseleave={[log, "leave"]} />
    : <div {...props} onmouseenter={[log, "enter"]} onmouseleave={[log, "leave"]} />
}

const ComponentOuter: Component<HtmlProps> = (p) => {
  const log = (name: string) => console.log("outer", name)
  return <ComponentInner {...p} onMouseEnter={[log, "enter"]} onMouseLeave={[log, "leave"]} />
}

const style: JSX.CSSProperties = { background: "lightgrey", width: "100%", height: "100vh" }
render(
  () => <ComponentOuter style={style} class='hola'></ComponentOuter>,
  document.getElementById('app') as HTMLElement
)

This modification should address your concerns. Best of luck!

Answer 2

If you're looking to prevent overwriting events in Solid-js, consider using onmouseleave (in lowercase). This approach will not overwrite existing events but instead "sum" them together since Solid-js interprets lowercase as adding a new event listener. You can find more information about this discussion Here.

In your solid-js example, the implementation would look something like this:

import { render } from 'solid-js/web';
import { Component, JSX } from "solid-js"
type HtmlProps = JSX.HTMLAttributes<HTMLDivElement>

const useDivAsComponent = true

const ComponentInner: Component<HtmlProps> = (props) => {
  const log = (name: string) => console.log("inner", name)
  const Div = (p: HtmlProps) => <div {...p} />
  return useDivAsComponent
     // onmouseenter, onmouseleave, instead of onMouseLeave onMouseEnter
    ? <Div {...props} onmouseenter={[log, "enter"]} onmouseleave={[log, "leave"]} />
    : <div {...props} onmouseenter={[log, "enter"]} onmouseleave={[log, "leave"]} />
}

const ComponentOuter: Component<HtmlProps> = (p) => {
  const log = (name: string) => console.log("outer", name)
  return <ComponentInner {...p} onMouseEnter={[log, "enter"]} onMouseLeave={[log, "leave"]} />
}

const style: JSX.CSSProperties = { background: "lightgrey", width: "100%", height: "100vh" }
render(
  () => <ComponentOuter style={style} class='hola'></ComponentOuter>,
  document.getElementById('app') as HTMLElement
)

This modification should address your concerns. Best of luck!

Answer 3

Answer №2

In the Solid framework, there are several methods for adding event listeners. Event listeners added as a prop, like onClick, are delegated, meaning they are attached to the document node for improved performance. For non-delegated handlers, you can use the syntax on:{eventName}.

If you need to add a listener to an element within another component, using refs is recommended. This marks the third method, in which you can utilize addEventListener.

The approach you are currently employing is not optimal. A better strategy would be to have a single, delegated listener on a common ancestor, and then use conditionals inside the handler's body.

Answer 4

In the Solid framework, there are several methods for adding event listeners. Event listeners added as a prop, like onClick, are delegated, meaning they are attached to the document node for improved performance. For non-delegated handlers, you can use the syntax on:{eventName}.

If you need to add a listener to an element within another component, using refs is recommended. This marks the third method, in which you can utilize addEventListener.

The approach you are currently employing is not optimal. A better strategy would be to have a single, delegated listener on a common ancestor, and then use conditionals inside the handler's body.

What is the best way to assign multiple event handlers to Solid.js components within a single HTML element?

Introduction

Details

Potential Solutions

Answer №1

Answer №2

Similar questions

How is it possible for this for loop to function properly without the need to pass the incrementing variable

Is There a Quicker Alternative to Eval for Generating Deep Clones?

Tips for navigating the material ui Expanded attribute within the Expansion Panel

Troubles encountered with the search bar filter functionality, implementing JS/JQuery within a Laravel blade template

What is the best method for obtaining a modified image (img) source (src) on the server side?

PhantomJs is only providing partial responses

Is there a way to ensure that the 'pointermove' event continues to trigger even after the dialog element has been closed?

Retrieve the CSS class definition using the console in the Chrome Developer Tools

Add a click event listener to the body element using a button click, without causing it to trigger

Using JavaScript to organize and categorize data within an array

gmap3 has encountered an error: undefined is not a valid function

Leveraging the withWidth higher order component (HOC) provided by

Guide on validating an email through a 6-digit code using Flutter, Node.js, and MongoDB

Issues with the HTML required attribute not functioning properly are encountered within the form when it is

button that takes you back to the top of a mobile website

Is it really necessary to still think poorly of JavaScript in 2011?

Leverage multiple services within a single AngularJS controller

Is there a way for me to duplicate a complex element multiple times within the same page?

Attempting to use vue-test-utils-getting-started with the standard configuration results in a "Preset Not Found" error during

Is there a way to modify the Javascript for this Contact Form to trigger a different action if a specific key is pressed instead?