Develop Reference

Can not type in input Link field in ckeditor5 with reactstrap Modal

I am working on a react project. I am using reactstrap modal and ckeditr5 for the text editor (classicEditor) which is opening inside the modal. Issue is I can not type in input link field. I have found solution for similar issues with other frameworks like bootstrap and material ui. There is some issue with Modal autoFocus property therefore it does not focus on input field. But I can not solve this issue with "reactstrap" Modal and ckeditor5.
Here is the image of the issue which I am talking about
Code is here:
import {
Button,
Input,
InputGroup,
Modal,
ModalBody,
ModalFooter,
ModalHeader} from "reactstrap";
return (
<Modal
isOpen={this.state.textEditorToggle}
className="text_edit_model edit-model"
>
<ModalHeader toggle={this.toggleModal}>{fieldName}</ModalHeader>
<ModalBody>
<CKEditor
config={{
extraPlugins: [uploadPlugin],
}}
editor={ClassicEditor}
data={value ? value : ""}
onReady={(editor) => {}}
// onInit={(editor) => {}}
onChange={this.handleCk5change}
/>
</ModalBody>
<ModalFooter>
<div className="record_btn" onClick={toggle}>
<button>CANCEL</button>
</div>
<div
className="record_btn"
onClick={saveFun}
>
<button disabled={load}>SAVE</button>
</div>
</ModalFooter>
</Modal>
)
I have also checked with changing Modal with normal and changing accordingly, It is working fine but this problem is occuring only with reactstrap Modal. I believe it is related to focus of Modal but not sure how to solve it. Can someone help here?

All buttons ghost clicking in drawer list when drawer is opened

I'm writing a single-page web application using React and Material UI, with React-Mini-Router for routing. I have a drawer on the side that is activated by a hamburger icon in the top app bar. Each of the items in the drawer is a Material UI ListItem that should navigate to their respective views when clicked. However, when the hamburger icon is clicked, it seems that all of the onClick events are being triggered, and the view changes to that of the last item on the list. If I type in the correct url for a view I want to go to, it works, but clicking the buttons in the drawer does not redirect away from the last page in the list.
I've tried changing which item is last on the list, and the problem follows the last item (which is why I think they're all getting triggered consecutively). I've made sure that the event for the hamburger button only triggers the drawer state change. I've also noticed that when the page changes, it goes to something like http://localhost:3000/#!/help instead of what I would expect to be http://localhost:3000/help or http://localhost:3000/help#!/
This is the setup for my drawer list:
const drawerList = (
<div width="250">
<ListItem button key='Home' onClick={this.ChangeView('/')}>
<ListItemIcon><HomeIcon /></ListItemIcon>
<ListItemText primary='Home' />
</ListItem>
<ListItem button key='Vote' onClick={this.ChangeView('/vote')}>
<ListItemIcon><VoteIcon /></ListItemIcon>
<ListItemText primary='Vote' />
</ListItem>
<ListItem button key='Organizer Login' onClick={this.ChangeView('/organizer')}>
<ListItemIcon><OrganizerIcon /></ListItemIcon>
<ListItemText primary='Organizer Login' />
</ListItem>
<Divider />
<ListItem button key='Help' onClick={this.ChangeView('/help')}>
<ListItemIcon><HelpOutlineIcon /></ListItemIcon>
<ListItemText primary='Help' />
</ListItem>
</div>
);
Thanks!

You are executing ChangeView on the component mount instead of binding the method to the click event. Just rewrite those lines like this:
<ListItem button key="Home" onClick={() => this.ChangeView('/')>...</ListItem>

ReactJS IconButton not working in Firefox

The click function of IconButton from Material UI is not working in any version of FireFox. This is the code I am using:
<div className='floating-button visible-xs'>
<IconButton touch={true} tooltipPosition="bottom-left">
<Create className='floating-button-icon' onTouchTap={this.props.onProfileEdit}/>
</IconButton>
</div>
Does anybody know how to fix this? The code above is 100% working in Chrome and Safari.

Please use onClick prop instead of onTouchTap and apply it to IconButton component itself instead of to particular icon.
<div className='floating-button visible-xs'>
<IconButton touch={true} tooltipPosition="bottom-left" onClick={this.props.onProfileEdit}>
<Create className='floating-button-icon' />
</IconButton>
</div>

React-select - can't stopPropagation on valueRenderer component

I am trying to display a popover on click over a react-select selected value element as follow :
My issue happens when I click on the popover trigger, the dropdown opens and the popover too... I just want to open the popover, I tried e.nativeElement.stopPropagation, e.stopPropagation, e.preventDefault and so on without success. Here is a sandbox If you want to know how I did this and how to reproduce the issue.
https://codesandbox.io/s/pjv7vmlv3j
Thanks for you help

The react-select opens the dropdown as a reaction to onMouseDown event, not onClick and that's why any onClick={(e) => e.stopPropagation()} can't prevent to open the dropdown. You need to add onMouseDown={(e) => e.stopPropagation()} along with the onClick handler to open only the popover.
In your code the snippet below should do the trick:
<span onMouseDown={e => e.stopPropagation()} style={styles.root}>
<span style={styles.label}>{label}</span>
<OverlayTrigger
trigger="click"
rootClose
placement="bottom"
overlay={popover}
animation={false}
>
<span style={styles.trigger}>{`${selected} / ${contacts.length}`}</span>
</OverlayTrigger>
</span>

Well I found a way to cancel the event. I just add an onValueClick prop to the <Select /> and put the stopPropagation there!

How to change default animation in Dialog component?

I am using Material UI and I want to change the default animation when a Dialog is open so that when it opens up it appears from bottom to top.
Is there a way to do this?
Thanks

Use the transition property.
<Dialog
transition={props => (
<Slide direction="left" {...props} />
)}
>
</Dialog>