After failing to load 5 TinyMCE editors on one page, I decided to create "edit" buttons which then loads the editor inside a modal.
<Modal.Body>
<FormGroup className="mb-3">
<Editor name="text" label="Text" /> //My TinyMCE object
</FormGroup>
</Modal.Body>
But when any of the TinyMCE features opens a modal of its own, none of its input controls are getting focused. Tried setting autoFocus to false on the Bootstrap Modal but still no use. I found this has been addressed in the past, as in this question. However, like the same, most responses are tailored for jQuery, which I'm not familiar with. Any React based solution?
Assuming you're using the react-bootstrap library, then you'd need to set the enforceFocus prop to false (instead of autoFocus). See https://react-bootstrap.github.io/components/modal/#modal-props
The reason this is needed is that bootstrap will try to ensure that the focus never leaves the modal dialog for accessibility purposes. This is normally fine, however in this case it conflicts with TinyMCE which itself needs to open new modal dialogs and focus the content inside (as you've already alluded to).
Related
I am playing around with React Components and I came across this website that goes over different ways to use Form Control with bootstrap styling. I want to create a text area that dynamically changes in size when user presses enter, but with the following exercise a scroll bar gets added. I could just change the number of rows, but is there a way to make the text field change in size every-time a user creates a new line
<Form.Group controlId="exampleForm.ControlTextarea1">
<Form.Label>Example textarea</Form.Label>
<Form.Control as="textarea" rows={1} />
</Form.Group>
React bootstrap examples
Thank you for your time and answer
This package would have the behavior you are looking for: react-textarea-autosize
For making it bootstrap-like, I'd suggest adding a bootstrap css className to this component (more info):
<TextareaAutosize className="form-control" />
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.
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
My team uses AngularStrap to integrate Bootstrap modals (e.g. popover, tooltip, etc.) into our Angular 1.5 app. Unfortunately, I have found it extremely difficult to reliably set focus on elements inside of these modals because of the funky way in which AngularStrap shows them. This logic lives here:
https://github.com/mgcrea/angular-strap/blob/b13098d9d658da9408930b25f79182df920718d2/src/tooltip/tooltip.js
Essentially, all AngularStrap modals start off in the hidden state:
// Set the initial positioning. Make the tooltip invisible
// so IE doesn't try to focus on it off screen.
tipElement.css({top: '-9999px', left: '-9999px', right: 'auto', display: 'block', visibility: 'hidden'});
They are then made visible in response to some internal Angular requestAnimationFrame service callback:
$$rAF(function () {
// Once the tooltip is placed and the animation starts, make the tooltip visible
if (tipElement) tipElement.css({visibility: 'visible'});
...
});
Unfortunately, this means that at the time all of the tooltip's DOM elements are constructed the tooltip is typically not yet visible and any attempts to call focus() on these elements fail. Do note that in my experience this happens intermittently (~20% of the time for me).
I tried disabling animations on the tooltip but it doesn't seem to be smart enough to skip this whole hidden/visible dance in that case. I could obviously try something super hacky (e.g. use an arbitrary timeout before attempting to set focus) but I am looking for a more reliable option.
Why not use the onShow event? It is documented a little bit wrong, but you can attach a handler that focus elements to bs-on-show. Furthermore you could make the handler generic, looking for an element with a focus-me attribute and focus that :
<div bs-popover
data-content='this input should be focused: <input type="text" focus-me>'
data-placement="bottom"
bs-on-show="setFocus"
data-html="true">
click me to show popover
</div>
<div bs-tooltip
data-title='this input should be focused: <input type="text" focus-me style="color:#000;">'
data-placement="bottom"
data-trigger="click"
bs-on-show="setFocus"
data-html="true">
click me to show tooltip
</div>
generic handler
$scope.setFocus = function(e) {
e.$element.find('[focus-me]').focus()
}
http://plnkr.co/edit/3wTinmNb5zsKnfUZQ9tT?p=preview
<input type="file" />
Can I replace the file input field (above) with a simple button:
<button type="submit">Upload</button>
File input doesn't fit nicely into the design, and styling it is a pain so if its possible to use a button instead for file uploading, thats also cross-browser compatible, that'd be awesome!
Thanks!
1- You can't call the open dialog using a button, you can just show the dialog using the input file field, or using a flash component.
2- You can work around this by putting input file on a button "using CSS" and set this input file transparent so it will look like the user is clicking on the button but infact he is clicking on the transparent input file.
Sample: http://www.quirksmode.org/dom/inputfile.html
You can style with CSS and DOM the input type file
See this page