search

day8 / re-com

A ClojureScript library of reusable components for Reagent
https://re-com.day8.com.au
MIT License
796 stars 147 forks source link

Warning/future error in React 16 #212

Closed smee closed 3 years ago

smee commented 4 years ago

Dropdown currently uses a link with a 'javascript:' href, see dropdown.cljs#L171. React 16.12.0 shows the following warning:

backend.js:6 Warning: A future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML try using dangerouslySetInnerHTML instead. React was passed "javascript:". in a (created by re_com.dropdown.dropdown_top) in re_com.dropdown.dropdown_top (created by re_com.dropdown.single_dropdown) in div (created by re_com.dropdown.single_dropdown) in re_com.dropdown.single_dropdown (created by scada_ui.components.event_annotations.user_defined_dropdown)

What is the rationale behind the 'javascript:' href? Could we do without? The comment says

Required to make this anchor appear in the tab order

I'm not sure what this means.

jrad87 commented 4 years ago

What is the rationale behind the 'javascript:' href? Could we do without? The comment says

Required to make this anchor appear in the tab order

I'm not sure what this means.

When a page is viewed in browser, pressing tab will cycle through giving focus to anchor tags or giving focus to various inputs (try it in the demo app). Since the markup for this widget doesn't use any input elements (it looks to be plain spans and divs) the href is required.

From what I gather here, providing a default value of 0 for tab-index could resolve the problem. All elements with tabindex=0 are inserted into the tab order according to their source order.

pbnsilva commented 3 years ago

It seems this warning still exists on the latest version of re-com.

Gregg8 commented 3 years ago

Yes, it does...will release a new version with this fix soon.