Prevent highlighted text from deselecting when clicking an input field? - javascript

I'm making a react application which allows for certain actions to be taken on highlighted text through a pop up.
Confluence
I'm using react-text-selection-popover which works very well. However, the pop up I have has an input field. The trouble I have is that if i were to click the input field (to enter some text), the highlight is deselected and the pop up disappears.
I tried options like user-select: none but it doesn't work.
Example Sandbox
Is there a way to highlight some text and enter some text in the pop-up div? And remove the highlight if i click anywhere else but the popup.

Related

Stopping a keyboard from popping up from button presses

I have built a small tool that pushes text into a <textarea> with button inputs, you can see it here
However, on mobile, when a user interacts with those buttons, the keyboard pops up obscuring half the screen. Is there anyway to stop this?
Try adding a readonly attribute to the textarea.

iOS : input field does not display text when typed in but cursor still moves

We use iPads in our warehouse and for some reason, some of them have issues with input fields. We have an HTML page which displays some text and has 1 input and a couple of buttons. When we focus on the input field, the keyboard shows up like normal, but when we type in, no text is displayed in the input field even though the cursor still moves as if it recognized that some characters were entered. The weirdest part is, if we zoom out, the text will actually appear.
When the above issue happens, if we submit the form with an "empty" input, it won't record the input's value, even though the cursor believes there were characters entered. If we zoom out and the text appears, then we can submit the form and the input's value is recorded correctly.
This does not happen on an Android device, it seems to be related to iOS only... any solutions?
Thanks!
Check out this question, maybe the same solution would work in this case as well? Input field bug on IOS - text turns white
And this one - can't get writing text in html text box in Webview of iOS

Is there a way to customize the alert box generated by onbeforeunload?

I have a page with text editor that I want to make sure the user knows that the edits they make will be lost before they actually leave. I have done event.preventDefault() for all links in my page and add my own version of alert box (or to be precise, div that looks like alert box), but for leaving by pressing last page, clicking on a bookmark or typing URL directly, I can only use the ugly default alert box.
Is there a way to customize the alert box on leaving?

IPhone - Not able to enter text in textarea

We have a form which has a mandatory HTML text-area and a button which posts the form.
When user click the button with empty text-area, we show a popup that the text-area field is required and the popup has a close button on it, when a user clicks close button, we put the focus back on text-area. In this case, the keypad opens up in IPhone but the user is not able to enter anything in the field.
If the user click outside the text-area field and then again clicks on the field, then user is able to enter text in the field.
Same thing works in android device but not working for IPhone.
Can anybody give me a suggestion of what to look for or how to handle this?
We are using the focus() method to set the focus on text-area.

Set focus when inserting a hyperlink in wysihtml5 editor

We are using wysihtml5 for a project. We noticed that when editing body text, if you highlight some text, and click the 'Insert link' button in the tool bar that focus is NOT set to the text box in the modal that pops up. The result is, if the user highlights text, clicks the insert link button, and pastes in there url with out first setting focus in the modal, then the url is inserted in the body text (behind the modal).
Looking for ideas in either the css or js on where to try and fix this. Thanks!
Upgraded gem from - bootstrap-wysihtml5-rails (0.3.2.100) to bootstrap-wysihtml5-rails (0.3.3.1) and that fixed the issue for us.

Categories