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?

Warning: React does not recognize the `textColor` prop on a DOM element

Getting this warning: Warning: React does not recognize the 'textColor' prop on a DOM element (everything else is working).
Using it in my component this way:
import { ImageWithFallback, Paper, Tabs, Tab, Typography, Tooltip,} from '#material-ui-core/dist';
<Paper square className={classes.root} data-test-id={testMediaEditRenditionTabPanel.paper}>
<Tabs
value={tabState}
variant="scrollable"
onChange={handleChange}
orientation="vertical"
indicatorColor="primary"
centered
textColor="primary"
className={classes.tabs}
>
</Tabs>
</Paper>
Thanks in advance.

Did you try with textcolor instead of textColor? I think the material UI of your project seems not to be the latest version. Please let me know how it works.

Material ui tooltip is not working on mobile

Tried converting Tooltip to a controlled component which depends on onClick event
This works fine in mobile and web but it looses it's original behaviour to show Tooltip on hover
Is there a solution that makes Tooltip work both on hover and onClick

As part of styling
Wanted to have touch event for mobile
Wanted to have hover event for desktop to also work
But had difficulty making it working due to hover for mobile.
Making enterTouchDelay value to 0 worked on mobile, 700ms is default value:
import Tooltip from '#mui/material/Tooltip';
import Button from '#mui/material/Button';
<Tooltip title="Some message" enterTouchDelay={0}>
<Button>Some message</Button>
</Tooltip>

So ultimately we need a tooltip that works both on hover and onClick.
Default Material-UI tooltip works fine both on web and mobile.
<Tooltip title="Show Tooltip">
<Button>Long press for 1s to show tooltip on mobile</Button>
</Tooltip>
Long-pressing on mobile shows tooltip but it also opens the dailog box which opens when we right-click(ctrl + click on mac) on web. So it is not UX friendly.
So enabling onClick by not loosing the hover functionality is ideal for both web and mobile devices.
<Tooltip
title="I am tooltip"
open={showTooltip}
onOpen={() => setShowTooltip(true)}
onClose={() => setShowTooltip(false)}
>
<Button
variant="outlined"
color="primary"
onClick={() => setShowTooltip(!showTooltip)}
>
Hoverme to open Tooltip
</Button>
</Tooltip>
Click here for complete code snippet.

For mobile, the click solution seems the best.
The docs provides one example with it,
<ClickAwayListener onClickAway={handleTooltipClose}>
<div>
<Tooltip
PopperProps={{
disablePortal: true,
}}
onClose={handleTooltipClose}
open={open}
disableFocusListener
disableHoverListener
disableTouchListener
title="Add"
>
<Button onClick={handleTooltipOpen}>Click</Button>
</Tooltip>
</div>
</ClickAwayListener>
https://mui.com/components/tooltips/#triggers

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>

How to replace React-Leaflet Popup with custom component?

I'm using React-Leaflet and (callemall)Material-UI in a project. I'm attempting to render the Material-UI Card component within the <Popup></Popup> component of React-Leaflet. I've tried pulling it into the Popup as a component but the popup doesn't let the component work as it should. Specifically, the card component has a button element that expands it but unfortunately, the popup won't let me click it. I'm sure there's some CSS-y thing that I need to override but my thought is that an easier option would be to just replace the popup component with my own component but I'm not sure how to go about doing so. Any insight is much appreciated :)
My code looks like this:
<Marker position={position}>
<Popup>
<MapPopup />
</Popup>
</Marker>
And the imported component looks like: (I've removed styles and unimportant details to make it simple to read)
<Card>
<CardHeader />
<CardMedia
expandable={true}
overlay={
<CardText expandable={true}>
<div>
<p>Text</p>
<Chip>text</Chip>
</div>
<div>
<p>Text</p>
<Chip>Text</Chip>
</div>
</CardText>
}>
<img src="cardMediaImageURL" />
</CardMedia>
</Card>

Long story short, React-Leaflet and Leaflet renders static html for the popup so it is not possible to render dynamic content within it. Rendering a material-ui component is possible, however it won't be interactive. You can accomplish this by wrapping your component with <MuiThemeProvider></MuiThemeProvider>. You just have to make sure that you have the content set to be the complete view and not with anything like an expander.
Solution is as follows:
<Popup>
<MuiThemeProvider muiTheme={getMuiTheme(yourThemeName)}>
<YourCustomComponent />
</MuiThemeProvider>
</Popup>