Mr. MonoChrome Mr. MonoChrome - 3 months ago 29
React JSX Question

onClick not firing when using fontawesome

I have a react component SearchField which is a wrapper around input. Im trying to get a fontawesome (x) to clear the input box when clicked, but all attempts to get the onClick to fire have failed.

If I cut and paste to the parent div, the onClick fires.
If i change the element to a element it still fails.
Ive tried manually positioning it outside of the input using chrome tools, and it still fails to fire.
Ive tried increasing the width and height, which also fails.

Note: _base is a wrapper around React.Component

Here's the code:

import React, { PropTypes } from 'react';
import _Base from '_Base';
import _ from 'underscore';
import classNames from 'classnames';

export default class SearchField extends _Base {
static defaultProps = {
name: null,
placeholder: null,
onSearch: null,
searchOnEnter: true,
liveSearch: false,
delay: 250
};

static propTypes = {
name: PropTypes.string.isRequired,
placeholder: PropTypes.string,
onSearch: PropTypes.func,
searchOnEnter: PropTypes.bool,
liveSearch: PropTypes.bool,
delay: PropTypes.number,
};

state = {
__value: null
};

constructor(props) {
super(props);
let me = this;
if(props.delay > 0){
me.onKeyDown = _.debounce(me._onKeyDown, props.delay);
} else {
me.onKeyDown = me._onKeyDown;
}
}

__onKeyDown(event) {
event.persist();
this.onKeyDown(event);
}

_onKeyDown(e) {
var me = this
, props = me.props
, val = me.refs.search.value
;

me.setState({ __value: val });

if(props.liveSearch ||
(props.searchOnEnter && e.key === "Enter")) {
me._onSearch(val);
return;
}
}

_clearSearch() {
var me = this;

me.refs.search.value = "";
me.setState({ __value: "" });

me._onSearch("");
}

_onSearch(val) {
var me = this
, props = me.props
;

if(props.onSearch) {
props.onSearch({ name: props.name, value: val });
}
}

render() {

return (
<div className={classNames("search-field form-group has-feedback", this.props.className)}>
<input
ref = {"search"}
className = "form-control"
type = "search"
autoCapitalize = "none"
autoComplete = "off"
autoCorrect = "on"
autoSave = "true"
autofocus = "false"
spellCheck = "false"
name = {this.props.name}
placeholder = {this.props.placeholder}
onKeyDown = {this.__onKeyDown}
/>
<i className="fa fa-times-circle cursor-pointer form-control-feedback"
onClick = {this._clearSearch}
title = "Clear Search"
/>

</div>
);
}
}

Answer

same code works fine for me, make sure you don't have any elements overlaid on top, and that theres no css disabling the mouse events like a pointer-events: none