OnClick property on FontAwesomeIcon typescript issue

[e-osuna-g]

adding Onclick property to FontAwesomeIcon gives this error in the compiler. example: <FaIcon onClick={this.showSettings} className={style.settingsIcon + ' ' +strIconClicked} icon="cog" /> TS2339: Property 'onClick' does not exist on type 'IntrinsicAttributes & Props'. i needed to wrap my <FaIcon in a span with the onClick, is there a way to add onClick and other Events to FontAwesomeIcon in typescript.

Thanks

[robmadole]

@cuauth can you provide a reproduction of this?

[e-osuna-g]

Sure,

import React from "react"
import ReactDOM from "react-dom"
import { library } from '@fortawesome/fontawesome-svg-core';
import { faHome } from '@fortawesome/free-solid-svg-icons';
library.add( faHome);
import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'
const onClick = function(){ console.log('Log')}
const Index = () => {
  return <FaIcon  onClick={onClick} icon="home"  />
};

ReactDOM.render(<Index />, document.getElementById("index")); 

this is the smallest reproduccion of code that i could make in my local environment maybe you will like it better in stackblitz https://stackblitz.com/edit/react-ts-npecft

[robmadole]

How about a cloneable GitHub repo? That Stackblitz doesn't run locally.

[e-osuna-g]

first time i run one of this, i know there's a lot of unused tools in the package json, but i took it from another project. https://github.com/cuauth/FontAwesomeOnClick

[robmadole]

@cuauth I've release 0.1.4-1 that I think should fix this up. Can you give it a try in your real project?

[e-osuna-g]

i'll hit it this weekend, and post updates, thanks

[LaurensRietveld]

@robmadole It works for me, but other valid attributes (like title) are not supported yet via these typings. How about extending from React.HTMLAttributes instead of React.DOMAttributes? I also got an import error at line 2 (import React from 'react'). Chaning this to import * as React from 'react' fixed it for me

[kontinuity]

Can confirm this is not working on latest version.

import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
...
<FontAwesomeIcon icon={faStar} pull="right" onClick={() => message.success('Added to favorites!')} />

Results in:

TS2322: Type '{ icon: IconDefinition; pull: "right"; onClick: () => MessageType; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Property 'onClick' does not exist on type 'IntrinsicAttributes & Props'.

[gytisgreitai]

@robmadole any news on this?

[e-osuna-g]

I haven't check it out but I will do it today if that's ok with you

On Fri, Apr 19, 2019, 4:17 AM Gytis Ramanauskas [email protected] wrote:

@robmadole https://github.com/robmadole any news on this?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FortAwesome/react-fontawesome/issues/196#issuecomment-484856501, or mute the thread https://github.com/notifications/unsubscribe-auth/ABMWBJZQHCO7LNYWEV3OYYTPRGS35ANCNFSM4F6RTWFA .

[Plasmoxy]

Same here, I had to wrap the FontAwesomeIcon with a span element to make it clickable.

[peetjvv]

Thanks to @Plasmoxy for the tip, but it would be nice if we can get a working onClick prop. It's a little annoying to have to wrap all the icons in spans.

[DiegoGorgazzi]

I couldn't make onClick work no matter what I wrapped FontAwesomeIcon with. I was able to make it clickable ONLY when wrapping it with an anchor element, but kind of useless if onClick isn't working.

I ended up using unicode instead (I needed arrows) and fudged things via CSS.

[siffash]

@cuauth any news on this?

[elramus]

Yeah i get the same error here too, BUT -- are you sure you really want the onClick on the icon in the first place? Wrapping it in either a button or a link is the more accessibly correct way to do this, unless you're also adding aria stuff and tabindex to the icon too.

[siffash]

Yes, ultimately I ended up using a wrapper tag, BUT since in general it IS possible to add onClick to SVGs why do we need to restrict developers in the first place?

[kolendomichal]

Issue is still relevant. I had to wrap my FontAwesomeIcon in <span> attribute

[fulin426]

Is wrapping the icon in a div or a span the only way to go around this issue? Without typescript I can put a onClick handler directly on the icon.

[siffash]

@fulin426 Please refer to the issue's name (it says "typescript issue").

[fulin426]

@siffash Maybe I wasn't clear with my issue, it's essentially the same as the OP. Typescript is not allowing me to attach a onClick handler directly on the Fontawesome component.

[e-osuna-g]

yeah thats the only workaround for typescript as far as i know.

[lwlewy]

Unfortunately, wrapping doesn't seem to work on IE11 :(

[JulienDemarque]

Maybe this issue should be re-opened. It's still throwing an error in Typescript.

[JeremiahChurch]

why was this issue closed? it's still an issue with current 5.11.2

[NimrodBZB]

I think this issue should be re-opened, onClick is not working, tried wrapping it with span and it still not working for me

[robmadole]

PRs are welcome on this issue. We don't use Typescript so it's going to be hard for us to know if we have fixed this or not. What about this file needs to change?

[robmadole]

If anyone can provide a reproducible test case that we can run locally that would also help a lot.

[ihaseebkhan]

I think this issue is fixed as onClick is directly working on FontAwesomeIcon tag. <FontAwesomeIcon onClick={this.onClickHandler} icon={faShareAlt} />

[robmadole]

We just released 0.1.9 if someone can re-test this.

[peetjvv]

I can confirm that it's working as expected for me now. I'm using v0.1.9