feat: make input icon option clickable

[maximegheraille]

Context 🔦

I would be nice to be able to make the icon inside the input clickable. This could be useful when I want to remove all text inside the input via the button, or the allow copy paste inside the input from the icon.

this one is an example that would be very useful

import React from 'react';
import { Input } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch,faTimes } from '@fortawesome/free-solid-svg-icons';

const inputStyles = {
    width: 300,
};

    <div className="rainbow-align-content_center rainbow-p-vertical_x-large rainbow-flex_wrap">
        <Input
            className="rainbow-p-around_medium"
            style={inputStyles}
            label="Input label"
            placeholder="Input with right icon"
            iconPosition="right"
           value='delete this from the icon'
            icon={<FontAwesomeIcon icon={faTimes} className="rainbow-color_gray-3" />}
        />
    </div>

[LeandroTorresSicilia]

@maximegheraille this is very useful and a valid use case.

I think we should add a close button icon when pass type="search" and get this functionality out of the box in the Input (like the input native one), but with the rainbow styles

It turns out that it will be difficult since we are sending the native event in the onChange which can block us from sending an onChange with an empty value

[adithyaakrishna]

Can I work on this? 👀

[LeandroTorresSicilia]

@adithyaakrishna we need to discuss more how we will solve this since the above solution implies we need to create a custom event and we think this is not a good approach. If you have some ideas we can discuss them.