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

Encountering issues with browser tabs and Socket.IO

Error in Next.js 13 due to Prisma table mapping causing hydration issues

Exploring the functionality of placeholders within jQuery

Discover the best methods for accessing all pages on a Facebook account

Get the hash value after a specific character using Javascript

SQL inputs with information that updates automatically / autofill SQL input boxes

Dnd-kit: item loses its place in line when dragged over Droppable area

Add a fading transition feature to images that are loaded at a later time

Activate the element only when all input fields are completed. This function can be used repeatedly

Is there a way to restore a previous version of package-lock.json?

What causes the issue of the 'MERGE' statement in Node.js resulting in the creation of duplicate nodes in Neo4j?

Why is it that the HttpClient constructor in Angular doesn't require parameters when instantiated through the constructor of another class, but does when instantiated via the 'new' keyword?

What are some ways to implement smooth scrolling when a navigation link is clicked?

Looking to display a single Angular component with varying data? I have a component in Angular that dynamically renders content based on the specific URL path

Using JavaScript to display content on the page after handling a form

Struggles encountered while configuring React

All menus effortlessly sliding out simultaneously

Is there a way to generate a modal list of values by utilizing bootstrap and angular, while incorporating spring boot as the backend technology?

Function for masking phone numbers is adding additional "x's" to the input field

Exploring the functionality of routes with the identifier :id