I am building a searchDropdown component in React. I want to render dropdown only when search field is active. So I put a condition to render dropdown.
But when the dropdown is rendered conditionally, onClick events inside dropdown are not triggering.
My component is below.
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {List, ListItem} from 'material-ui/List';
import {Card} from 'material-ui/Card';
import Divider from 'material-ui/Divider';
import TextField from 'material-ui/TextField';
import resources from '../../resources/resources';
import cx from 'classnames';
import './SearchDropdown.scss';
class SearchDropdown extends Component {
constructor(props) {
super(props);
this.cardContainerStyle = {
'maxHeight': '300px',
'overflow': 'scroll',
'border': '1px solid rgb(158, 158,158)'
};
this.searchFieldUnderlineStyle = {
'borderBottom': '1px solid #ccc'
}
this.state = {
dropdownStyle: {}
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.isActive && this.props.isActive !== nextProps.isActive) {
this.shouldSetBounds = true;
} else {
this.shouldSetBounds = false;
}
}
componentDidUpdate() {
if(this.shouldSetBounds) {
this._setDropdownBounds();
this.shouldSetBounds = false;
}
}
componentDidMount() {
window.addEventListener('scroll', this._handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this._handleScroll);
}
_handleScroll = () => {
if (this.props.isActive) {
this._setDropdownBounds();
}
}
_setDropdownBounds() {
const dropdownContainerOffset = this.dropdownContainer.getBoundingClientRect();
const containerTop = dropdownContainerOffset.top;
const containerLeft = dropdownContainerOffset.left;
const viewportHeight = window.innerHeight;
const viewportWidth = window.innerWidth;
const dropdownStyle = {
top: dropdownContainerOffset.top + dropdownContainerOffset.height,
left: dropdownContainerOffset.left
};
if (containerTop > viewportHeight/2) {
dropdownStyle.top = 'auto';
dropdownStyle.bottom = viewportHeight - containerTop;
}
this.setState({ dropdownStyle });
}
_renderDropdown() {
const {onSelect, datalist = []} = this.props;
return (
<div className="search-dropdown-wrapper" style={this.state.dropdownStyle} onClick={(event) => {alert("Outer wrapper")}}>
<Card containerStyle={this.cardContainerStyle}>
<div>
{"Sample Dropdown"}
</div>
</Card>
</div>
);
}
_renderSearchField() {
const {value, handleSearch} = this.props;
return (
<TextField
value={value}
onChange={handleSearch}
fullWidth={true}
hintText={resources.BRAND_SEARCH}
underlineStyle={this.searchFieldUnderlineStyle}
/>
);
}
render() {
const {isActive, onBlur} = this.props;
return (
<div className="search-dropdown-container field-wrapper"
ref={dropdownContainer => this.dropdownContainer = dropdownContainer}
onBlur={onBlur}
>
{this._renderSearchField()}
{isActive && this._renderDropdown()}
</div>
);
}
}
SearchDropdown.propTypes = {
isActive: React.PropTypes.bool.isRequired,
value: React.PropTypes.string,
datalist: React.PropTypes.array,
handleSearch: React.PropTypes.func.isRequired,
onSelect: React.PropTypes.func
}
export default SearchDropdown;
In above code, _renderDropdown will only execute when isActive is true. The compoenent is getting rendered perfectly with all styles when the search field is active. But when this component is rendered, the onClick event on the div with class search-dropdown-wrapper is not working.
I'm not sure where I'm doing mistake. Please let me know if there is any proper way to do this. Thanks.
I finally made it work.
There is nothing wrong with the arrow function _renderDropdown used. The problem is with the onBlur event attached to the parent div with class search-dropdown-container of _renderDropdown. I have removed that onBlur event from there and added to search-dropdown-wrapper div. Then it started working fine.
What I think is, The search-dropdown-wrapper position is fixed and so it will not be as part of search-dropdown-container technically. So click event happening on the search-dropdown-wrapper triggers onBlur event of search-dropdown-container first. So, the click event is not firing on search-dropdown-wrapper
Please bind this to all methods in your class in the constructor like for example -
constructor(props) {
this._handleScroll = this._handleScroll.bind(this)
this._setDropdownBounds = this._setDropdownBounds.bind(this)
}
FYI
https://reactjs.org/docs/handling-events.html
http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/
https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56
Related
A wrapper EditModal component comes with a onClickOutside event. A child component of this modal is a Material-UI Select. A click on a MenuItem fires onClickOutside thus closing the modal without the new value being selected.
The source of the problem is this.wrapperRef.current.contains(element) returning false even though MenuItem is a grand child of EditModal.
Why is this happening? How to avoid this behavior?
https://codesandbox.io/s/select-inside-edit-modal-l69zj?file=/src/edit-modal.js
(code is adapted from this blog)
import React, { createRef } from "react";
import Select from "#material-ui/core/Select";
import MenuItem from "#material-ui/core/MenuItem";
class EditModal extends React.Component {
constructor(props) {
super(props);
this.wrapperRef = createRef();
this.state = { value: props.initialValue };
}
componentDidMount() {
document.body.addEventListener("mousedown", this.onClickOutside);
}
componentWillUnmount() {
document.removeEventListener("mousedown", this.onClickOutside);
}
onClickOutside = (e) => {
const { onClose } = this.props;
const element = e.target;
if (this.wrapperRef.current && !this.wrapperRef.current.contains(element)) {
console.log(this.wrapperRef.current.contains(element));
e.preventDefault();
e.stopPropagation();
onClose();
}
};
onChange = (e) => {
const { onClose } = this.props;
this.setState({ value: e.target.value });
this.props.onChange(e.target.value);
onClose();
};
render() {
const value = this.state.value;
return (
<div className="modal--overlay">
<div className="modal" ref={this.wrapperRef}>
<h1>Select a new value</h1>
<Select
id="demo-customized-select"
value={value}
color="primary"
onChange={this.onChange}
>
<MenuItem value={"A"}>A</MenuItem>
<MenuItem value={"B"}>B</MenuItem>
<MenuItem value={"C"}>C</MenuItem>
</Select>
</div>
</div>
);
}
}
export default EditModal;
A colleague found the answer. The popover menu generated by Material-UI is not placed as children of the Select in the DOM.
To fix the onClickOutside, an additionnal condition referencing this menu should be added using Select attribute MenuProps.
https://codesandbox.io/s/select-inside-edit-modal-forked-wrz7t?file=/src/edit-modal.js:1382-1448
[...]
this.wrapperRef = createRef();
this.inputRef = createRef();
[...]
if (
this.wrapperRef.current &&
!this.wrapperRef.current.contains(element) &&
(this.inputRef.current === null ||
(this.inputRef.current && !this.inputRef.current.contains(element)))
) {
[...]
<Select
MenuProps={{
ref: this.inputRef
}}
id="demo-customized-select"
value={value}
color="primary"
onChange={this.onChange}
>
[...]
We have created a notification system that uses the material ui Snackbar with an action button and close button. I'm trying to add a listener event for enter so that specific notification's action will fire and close the Snackbar. I attempted to do this when the component is mounted, but the components mount when the application loads they are just not shown until their state is set to open. This resulted in all the actions attached to the Snackbars firing at once. I then attempted to use a ref but had no success. Below I will show the code for the button that calls the notifications and the notification component itself. I'm looking for suggestions on how to close the active Snackbar and fire off its action with enter without activating the other mounted notifications.
UPDATE: I changed the key from enter to spacebar and it works as desired. It seems the issue lies with the enter key itself.
https://material-ui.com/api/root-ref/#__next
import React from 'react';
import { connect } from 'react-redux';
import { withStyles } from '#material-ui/core/styles';
import IconButton from '#material-ui/core/IconButton';
import DeleteIcon from '#material-ui/icons/Delete';
import Tooltip from '#material-ui/core/Tooltip';
import { NotifierConfirm, enqueueInfo } from '#paragon/notification-tools';
import { deleteDocument } from '../../actions/documents';
import { getSelectedDocument } from '../../selectors/documents';
import { jobIsLocked } from '../../modules/jobLocking'; // eslint-disable-line
const styles = ({
border: {
borderRadius: 0,
},
});
class DeleteDocument extends React.Component {
state = {
deleteDocumentOpen: false,
}
onDeleteFile = () => {
if (jobIsLocked()) {
return;
}
this.setState({ deleteDocumentOpen: true });
}
closeDeleteDocument = () => {
this.setState({ deleteDocumentOpen: false });
};
onConfirmDelete = () => {
this.props.onDeleteFile(this.props.selectedDocument.id);
this.setState({ deleteDocumentOpen: false });
}
render() {
const { classes } = this.props;
return (
<div>
<Tooltip disableFocusListener id="delete-tooltip" title="Delete Document">
<div>
<IconButton
className={`${classes.border} deleteDocumentButton`}
disabled={(this.props.selectedDocument == null)}
onClick={this.onDeleteFile}
>
<DeleteIcon />
</IconButton>
</div>
</Tooltip>
<NotifierConfirm
open={this.state.deleteDocumentOpen}
onClose={this.closeDeleteDocument}
onClick={this.onConfirmDelete}
message="Are you sure you want to DELETE this document?"
buttonText="Delete"
/>
</div>
);
}
}
const mapStateToProps = (state) => {
const selectedDocument = getSelectedDocument(state);
return {
selectedDocument,
};
};
function mapDispatchToProps(dispatch) {
return {
onDeleteFile: (documentId) => {
dispatch(deleteDocument(documentId));
},
enqueueInfo,
};
}
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(DeleteDocument));
import React from 'react';
import { withStyles, WithStyles, StyleRulesCallback } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import Snackbar from '#material-ui/core/Snackbar';
import IconButton from '#material-ui/core/IconButton';
import CloseIcon from '#material-ui/icons/Close';
import RootRef from '#material-ui/core/RootRef';
interface NotifierConfirmProps {
open: boolean;
onClose: any;
onClick: () => void;
message: string;
messageSecondary?: any;
buttonText: string;
}
type OwnProps = NotifierConfirmProps & WithStyles<typeof styles>;
const styles: StyleRulesCallback = () => ({
snackbar: {
marginTop: 85,
zIndex: 10000000,
'& div:first-child': {
'& div:first-child': {
width: '100%',
},
},
},
close: {
padding: 8,
marginLeft: 8,
},
buttonColor: {
backgroundColor: '#F3D06E',
},
messageDiv: {
width: '100%',
}
});
class NotifierConfirmComponent extends React.Component<OwnProps> {
notifierRef: React.RefObject<{}>;
constructor(props: OwnProps) {
super(props);
// create a ref to store the textInput DOM element
this.notifierRef = React.createRef();
this.focusNotifier = this.focusNotifier.bind(this);
}
keyPressHandler = (event: any) => {
if (!this.props.open) return;
if (event.keyCode === 27) {
this.props.onClose();
}
if (event.keyCode === 13) {
this.props.onClick();
}
}
focusNotifier() {
// Explicitly focus the text input using the raw DOM API
// Note: we're accessing "current" to get the DOM node
// this.notifierRef.current.focus(); this will not work
}
componentDidMount() {
document.addEventListener('keydown', this.keyPressHandler, false);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.keyPressHandler, false);
}
render() {
const { classes } = this.props;
return (
<React.Fragment>
<RootRef rootRef={this.notifierRef}>
<Snackbar
className={classes.snackbar}
anchorOrigin={{
vertical: 'top',
horizontal: 'center',
}}
open={this.props.open}
onClose={this.props.onClose}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={
<div className={classes.messageDiv} id="message-id">
{this.props.message}<br />
{this.props.messageSecondary}
</div>}
action={[
<Button
className={`${classes.buttonColor} confirmActionButton`}
variant="contained"
key={this.props.buttonText}
size="small"
onClick={this.props.onClick}
>
{this.props.buttonText}
</Button>,
<IconButton
key="close"
aria-label="Close"
color="inherit"
className={classes.close}
onClick={this.props.onClose}
>
<CloseIcon />
</IconButton>,
]}
/>
</RootRef>
</React.Fragment>
);
}
}
export const NotifierConfirm = withStyles(styles)(NotifierConfirmComponent);
The answer for this was changing the event listener to keyup instead of
keydown. Deduced this from this post. Why do Enter and Space keys behave differently for buttons?
I am near the end of creating my application.
So it is for banks accounts where they ask you to give the first letter of your password, then for example fourth, etc.
I'm tired of counting on my own so I created this app.
But there is the last bug that I don't know how to fix.
So when I press "1" I get "1 - H", and then when I press "4" I want to get:
"1 - H" (clicked before)
"4 - X" (clicked just now)
but instead, I get:
"4 - X" (clicked just now)
"4 - X" (clicked just now)
So it is caused by the way handleResults() function works inside my Input component, but for now it is my only concept how to approach this...
import React, { Component } from 'react';
import TextField from 'material-ui/TextField';
import './style.css';
import Buttons from '../Buttons';
import Results from '../Results';
class Input extends Component {
constructor(props) {
super(props);
this.state = {
password: 'Hh9Xzke2ayzcEUPHuIfS',
selectedButtons: [],
};
this.handleButtonSelectTwo = this.handleButtonSelectTwo.bind(this);
}
handleInputChange(pass) {
this.setState({ password: pass });
}
handleButtonSelectTwo(selected) {
this.setState({
selectedButtons: [...this.state.selectedButtons, selected],
});
}
handleResults() {
return this.state.selectedButtons.map(el => (
<Results key={el} appState={this.state} />
));
}
render() {
return (
<div>
<div className="Input-textfield">
<TextField
hintText="Paste your password here to begin"
value={this.state.password}
onChange={event => this.handleInputChange(event.target.value)}
/>
</div>
<div>
<Buttons
handleButtonSelectOne={this.handleButtonSelectTwo}
array={this.state.password.length}
/>
{this.handleResults()}
</div>
</div>
);
}
}
export default Input;
and here is Results component code:
import React, { Component } from 'react';
import _ from 'lodash';
import Avatar from 'material-ui/Avatar';
import List from 'material-ui/List/List';
import ListItem from 'material-ui/List/ListItem';
import './style.css';
const style = {
avatarList: {
position: 'relative',
left: -40,
},
avatarSecond: {
position: 'relative',
top: -40,
left: 40,
},
};
class Results extends Component {
resultsEngine(arg) {
const { selectedButtons, password } = this.props.appState;
const passwordArray = password.split('').map(el => el);
const lastSelectedButton = _.last(selectedButtons);
const passwordString = passwordArray[_.last(selectedButtons) - 1];
if (arg === 0) {
return lastSelectedButton;
}
if (arg === 1) {
return passwordString;
}
return null;
}
render() {
if (this.props.appState.selectedButtons.length > 0) {
return (
<div className="test">
<List style={style.avatarList}>
<ListItem
disabled
leftAvatar={<Avatar>{this.resultsEngine(0)}</Avatar>}
/>
<ListItem
style={style.avatarSecond}
disabled
leftAvatar={<Avatar>{this.resultsEngine(1)}</Avatar>}
/>
</List>
</div>
);
}
return <div />;
}
}
export default Results;
Anyone has an idea how should I change my code inside handleResults() function to achieve my goal? Any help with solving that problem will be much appreciated.
Buttons component code:
import React from 'react';
import OneButton from '../OneButton';
const Buttons = props => {
const arrayFromInput = props.array;
const buttonsArray = [];
for (let i = 1; i <= arrayFromInput; i++) {
buttonsArray.push(i);
}
const handleButtonSelectZero = props.handleButtonSelectOne;
const allButtons = buttonsArray.map(el => (
<OneButton key={el} el={el} onClick={handleButtonSelectZero} />
));
if (arrayFromInput > 0) {
return <div>{allButtons}</div>;
}
return <div />;
};
export default Buttons;
And OneButton code:
import React, { Component } from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const style = {
button: {
margin: 2,
padding: 0,
minWidth: 1,
},
};
class OneButton extends Component {
constructor() {
super();
this.state = { disabled: false };
}
handleClick() {
this.setState({ disabled: !this.state.disabled });
this.props.onClick(this.props.el);
}
render() {
return (
<RaisedButton
disabled={this.state.disabled}
key={this.props.el}
label={this.props.el}
style={style.button}
onClick={() => this.handleClick()}
/>
);
}
}
export default OneButton;
In your resultsEngine function in the Results component you are specifying that you always want the _.last(selectedButtons) to be used. This is what it is doing, hence you always see the last button clicked. What you actually want is the index of that iteration to show.
const lastSelectedButton = selectedButtons[this.props.index];
const passwordString = passwordArray[selectedButtons[this.props.index]];
To get an index you have to create and pass one in, so create it when you map over the selected Buttons in the handleResults function in your Input component.
handleResults() {
return this.state.selectedButtons.map((el, index) => (
<Results key={el} appState={this.state} index={index} />
));
}
I have a React app like:
Main.js-
import React, { Component } from 'react';
import _ from 'underscore';
import ApplicationsButtons from '../components/ApplicationsButtons';
let applications_url = 'http://127.0.0.1:8889/api/applications'
export default class Main extends Component {
constructor(props) {
super(props);
this.state = {applications: [], selected_app: 1};
this.updateSelectedApp = this.updateSelectedApp.bind(this);
}
componentDidMount() {
let self = this;
$.ajax({
url: applications_url,
method: 'GET',
success: function(data) {
console.log(data);
let objects = data.objects;
let apps = objects.map(function(object) {
return {name: object.name, id: object.id};
});
console.log(apps);
self.setState({applications: apps});
}
});
}
updateSelectedApp(id) {
this.setState({selected_app: id});
}
render() {
return (
<div>
{this.state.selected_app}
<ApplicationsButtons apps={this.state.applications} />
</div>
);
}
}
ApplicationsButtons.js-
import React, { Component } from 'react';
export default class ApplicationsButtons extends Component {
render() {
var buttons = null;
let apps = this.props.apps;
let clickHandler = this.props.clickHandler;
if (apps.length > 0) {
buttons = apps.map(function(app) {
return (<button key={app.id}>{app.name} - {app.id}</button>);
// return (<button onClick={clickHandler.apply(null, app.id)} key={app.id}>{app.name} - {app.id}</button>);
});
}
return (
<div>
{buttons}
</div>
);
}
}
I want to pass an onClick to the buttons that will change the currently selected app. Somehow, I just got my first infinite loop in React ("setState has just ran 20000 times"). Apparently, when I tried to pass the event handler to be called on click, I told it to keep calling it.
The onClick function should change state.selected_app for the Main component, based on the id for the button that was clicked.
You are not passing the handler as prop.
Here's what you should do:
render() {
return (
<div>
{this.state.selected_app}
<ApplicationsButtons
apps={this.state.applications}
handleClick={this.updateSelectedApp}
/>
</div>
);
}
And in ApplicationButtons:
render() {
var buttons = null;
let apps = this.props.apps;
let clickHandler = this.props.handleClick;
if (apps.length > 0) {
buttons = apps.map(app =>
<button key={app.id} onClick={() => clickHandler(app.id)}>{app.name} - {app.id}</button>);
);
}
return (
<div>
{buttons}
</div>
);
}
I am building an isomorphic React app. The workflow I am currently working through is :
User navigates to the /questions route which makes the API call server side and loads the data on the page. This calls the renderData() function like it should and loads all the questions for the user to see.
User clicks add button to add new question and a modal pops up for a user to enter in the form fields and create a new question.
With every change in the modal, the renderData() function is getting called (which it shouldn't). When the user clicks the Create Question button, the renderData() function is also getting called is throwing an error because the state changes.
I can't pinpoint why the renderData() function is getting called every single time anything happens in the modal. Any ideas as to why this is happening and how to avoid it?
Main component :
import React, { Component, PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './QuestionsPage.scss';
import QuestionStore from '../../stores/QuestionStore';
import QuestionActions from '../../actions/QuestionActions';
import Loader from 'react-loader';
import QuestionItem from '../../components/QuestionsPage/QuestionItem';
import FloatButton from '../../components/UI/FloatButton';
import AddQuestionModal from '../../components/QuestionsPage/AddQuestionModal';
const title = 'Questions';
class QuestionsPage extends Component {
constructor(props) {
super(props);
this.state = QuestionStore.getState();
this.onChange = this.onChange.bind(this);
this.openModal = this.openModal.bind(this);
this.closeMOdal = this.closeModal.bind(this);
}
static contextTypes = {
onSetTitle: PropTypes.func.isRequired,
};
componentWillMount() {
this.context.onSetTitle(title);
QuestionStore.listen(this.onChange);
}
componentWillUnmount() {
QuestionStore.unlisten(this.onChange);
}
onChange(state) {
this.setState(state);
}
openModal = () => {
this.setState({ modalIsOpen: true});
}
closeModal = () => {
this.setState({ modalIsOpen: false});
}
createQuestion = () => {
const date = new Date();
const q = this.state.question;
q.createdAt = date;
this.setState({ question : q });
QuestionStore.createQuestion(this.state.question);
}
textChange = (val) => {
const q = this.state.question;
q.text = val;
this.setState({ question : q });
}
answerChange = (val) => {
const q = this.state.question;
q.answer = val;
this.setState({ question : q });
}
tagChange = (val) => {
const q = this.state.question;
q.tag = val;
this.setState({ question : q });
}
companyChange = (val) => {
const q = this.state.question;
q.company = val;
this.setState({ question : q });
}
renderData() {
return this.state.data.map((data) => {
return (
<QuestionItem key={data.id} data={data} />
)
})
}
render() {
return (
<div className={s.root}>
<div className={s.container}>
<h1>{title}</h1>
<div>
<Loader loaded={this.state.loaded} />
<FloatButton openModal={this.openModal}/>
<AddQuestionModal
open = {this.state.modalIsOpen}
close = {this.closeModal}
createQuestion = {this.createQuestion}
changeText = {this.textChange}
changeAnswer = {this.answerChange}
changeTag = {this.tagChange}
changeCompany = {this.companyChange}
/>
{ this.renderData() }
</div>
</div>
</div>
);
}
}
export default withStyles(QuestionsPage, s);
Modal Component :
import React, { Component, PropTypes } from 'react';
import QuestionStore from '../../stores/QuestionStore';
import QuestionActions from '../../actions/QuestionActions';
import Modal from 'react-modal';
import TextInput from '../UI/TextInput';
import Button from '../UI/Button';
class AddQuestionModal extends Component {
createQuestion = () => {
this.props.createQuestion();
}
closeModal = () => {
this.props.close();
}
changeText = (val) => {
this.props.changeText(val);
}
changeAnswer = (val) => {
this.props.changeAnswer(val);
}
changeTag = (val) => {
this.props.changeTag(val);
}
changeCompany = (val) => {
this.props.changeCompany(val);
}
render() {
return (
<Modal
isOpen={this.props.open}
onRequestClose={this.closeModal} >
<TextInput
hintText="Question"
change={this.changeText} />
<TextInput
hintText="Answer"
change={this.changeAnswer} />
<TextInput
hintText="Tag"
change={this.changeTag} />
<TextInput
hintText="Company"
change={this.changeCompany} />
<Button label="Create Question" onSubmit={this.createQuestion} disabled={false}/>
<Button label="Cancel" onSubmit={this.closeModal} disabled={false}/>
</Modal>
);
}
}
export default AddQuestionModal;
On click of
It's happening because every change causes you to call the setState method and change the state of the main component. React will call the render function for a component every time it detects its state changing.
The onChange event on your inputs are bound to methods on your main component
Each method calls setState
This triggers a call to render
This triggers a call to renderData
React allows you to change this by overriding a shouldComponentUpdate function. By default, this function always returns true, which will cause the render method to be called. You can change it so that only certain changes to the state trigger a redirect by comparing the new state with the old state.