I am trying to implement rich text in a dialog box which I picked from Material-UI. For doing so I am using a package react-medium-editor. If I place it inside dialog box it does not convert the text to rich text but outside the dialog box it does.
What can be the problem
Here is the sample project that I made to demonstrate.
Codesandbox link
You can make react-medium-editor work with Material-UI's Dialog by setting the prop: disableEnforceFocus to true.
<Dialog
disableEnforceFocus
open={open}
onClose={() => handleClose()
{...otherDialogProps}
>
// Dialog Content
</Dialog>
WARNING: According to Material-UI's docs on disableEnforceFocus:
If true, the modal will not prevent focus from leaving the modal while
open.
Generally this should never be set to true as it makes the modal
less accessible to assistive technologies, like screen readers.
Related
I created a simple app to work through an issue I'm having toggling a sidebar. I'm trying to use onClicks so that I can open and close a sidebar, and yet can't get it to work. I'm using styled-components, and for whatever reason I can't get the sidebar to toggle. I have a simple piece of state, isOpen, which is initialized to false, and when i click on a button in the 'navbar', i'd like it to toggle state to true via an onClick, and the sidebar should appear, and yet, it isn't working.
Here is the codesandbox link
I tried re-writing the app from scratch, using destructuring vs not using destructuring, and looked for any bugs in the code but couldn't. Any ideas for what I can try next? Also I made sure to use arrow functions for my onClicks.
The first issue I see is that the SidebarContainer is creating an overlay that prevents clicking on the button to open it. You'll need to change the visibility property on the SidebarContainer that's exported from SidebarElements:
visibility: ${(props) => (props.isOpen ? "visible" : "hidden")};
I prefer using the visibility property over setting display to block or none because if you want to you can animate or transition properties like opacity or transform. When toggling the display property your sidebar will just appear and disappear instantly.
Something else, you don't need to use an anonymous callback when calling the toggle from inside of Sidebar and Navbar:
<CloseIcon onClick={toggle}>X</CloseIcon>
<OpenIcon onClick={toggle}>open sidebar</OpenIcon>
I've updated the sandbox link you provided.
There are two problems with your code
You are calling the toggle like onClick={() => toggle} when you should be calling it like onClick={toggle} or onClick={() => toggle()}
Your "sidebar" is a overlapping your navbar (it is position:fixed with opacity:0 and covers the whole screen)
So fix 1 and then either move the sidebar elsewhere (as to not overlap) or change its display from none to block instead of the opacity.
This is what I currently have:
<TooltipHost
content="Enter claim name in a way to be understandable for all parties."
directionalHint={DirectionalHint.rightCenter}
calloutProps={{ calloutMaxWidth: 100}}
>
<TextField />
</TooltipHost>
The tooltip is shown on hover. I want it to be exclusively shown on focus.
Is there a way to do it without controlling it with state?
The host automatically adds it to hover and focus. If you want focus only you'd need to use the Tooltip control itself and manually show it on focus.
I am using React and Semantic UI for my website and I'm looking to create a modal popup to provide some action items on the page.
Currently, with Semantic's Modal, you must choose between three dimmer options (Default, inverted and blurring). In my case, I want the pop-up to appear, but I don't want ANY overlay. The page behind the model should appear as normal. Strangely, this isn't easy/obvious to implement.
On my page, I have the following example model code.
<Modal dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
<Modal.Header>Select a Photo</Modal.Header>
<Modal.Content image>
<Modal.Description>
<p>Some contents.</p>
</Modal.Description>
</Modal.Content>
</Modal>
The three options (default,inverted and blur) obviously don't work.
I have tried using styling to set the background color to transparent and other optoins, but nothing seems to work.
<Modal style={{backgroundColor: "transparent"}} dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
I know there must be an easy solution here..what is it?
Thx for your help.
Is used to be possible to set dimmer={false}, but this is deprecated (see link below) according to the documentation, and you will need to use styling in order to make it transparent, so your solution is close to what you need to do. If you inspect the rendered Modal, you'll see that you need to override the background-color of the .ui.dimmer css class. You should be able to do that in your component's stylesheet.
https://github.com/Semantic-Org/Semantic-UI-React/pull/2882
Reproduction link
Steps to reproduce
Click on open dialog
Click on open popup
Try to enter any text. You won't be able to able the text inside popup fields.
What is expected?
I should be able to enter text inside input field in the popup.
What is actually happening?
When the antd popup is opened inside a dialog, I am able to see the popup by changin z-index but I am not able to enter anything inside popup.
EnvironmentInfo
antd 3.13.6
React v16.4.1
System mac os 10.14.2
Browser reactjs v16.4.1
Can you change your Dialog to:
<Dialog
fullScreen
open={this.state.open}
onClose={this.handleClose}
TransitionComponent={Transition}
disableEnforceFocus={true}
>
This should fix the issue.
React Material-Ui has the Dialog component which has the property modal, when i change it to true or false it show me the same result what does this property means?
it is really confusing me kindly help me?
Material Ui version:0.20.0
Code
<Dialog
modal={true}
open={props.openClose}
autoScrollBodyContent={true}>
{props.children}
</Dialog>
Modal dialog is apparently similar to the other dialogs but Modal dialog can only be closed by selecting one of the actions.
According to the Material UI documentation, the property which handles the visibility of Dialog is open.
In your example, you have given as open={props.openClose}. Please update the same with true or false and check the result.
Check the example
Also, please find the API documentation here