Having an element take on the onClick of another element

With the recent implementation of a rich text editor, I was tasked with creating a button with a nice icon to replace the look of the traditional input of type color. If you’ve never seen what the input of type color looks like, you can see a reference to it down below. It’s not the prettiest thing but we can work with it.

Boring Input of Type Color

Instead what we want is a cool looking color dropper and when we click on that color dropper, we want this color picker to open. What does that mean for us? It means that we need to hide the input and somehow get the button to replace the onClick such that when the button is clicked, the input is also clicked.

After importing the coolest looking SVG for this, take a look at what we have side by side. The left is our traditional color input and on the right is what we want to act like our color input.

Look rough but stay with me here

So here’s out game plan:

1. Let’s add a reference node to our color input.
2. Let’s create an onClick function for the new button.
3. The logic is as follows, when we click on the cool icon, the color picker should open.

You can find the code for this here

And just like that, we’ve managed to create another button that can handle the onClick of the color input. We’re almost done. Now that we don’t need to actually see the color input we can hide it!

If hiding the original element, I recommend creating a container for both old and new element. Give the color input both width and height of 0, and position the new button ontop of the old such that it lays right on top of the old. That way, the color picker doesn’t open in random areas of our page!