Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug]: Unable to select text inside inputs when a toast is open

See original GitHub issue

What is the current behavior? When the toast is open & draggable={true} it is not possible to select the text inside inputs with mouse drag.

https://user-images.githubusercontent.com/9304194/102709941-78ea4700-42b7-11eb-8a68-768fb6725b1c.mov

Steps to reproduce:

open codesandbox https://codesandbox.io/s/react-react-toastify-working-forked-bu95r
write some text inside the input
click to open a toast
try to select the text inside of the input using mouse drag

What is the expected behavior? It should not prevent mouse drag outside of the toast it self.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React v17 react-toastify v6.2.0 (it is not reproduces in react-toastify 6.1.0)

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:9 (3 by maintainers)

Top GitHub Comments

1reaction

fkhadracommented, Jan 15, 2021

Indeed. The PR is open I’m almost done.

0reactions

dhebert-devcommented, Jul 13, 2022

I am experiencing this issue currently as of react-toastify: ^6.2.0. Is there a planned date or quarter when this bugfix will go live? Thanks!

Top Results From Across the Web

How to get text from Toast message which gets disappeared ...

You need to open the page's source (F12) and find this "toast" element - it should be some <div> with either id or...

800050 - unable to select text in input[type="text"][draggable]

Expected results: i'd expect it to work as in chrome, where text in draggable input fields is selectable. 1. we have user-select: none...

How to create a custom toast component with React

Open a terminal, navigate to the directory where you want to add your ... To create a toast component, create a folder called...

Toasts - Lightning Design System

A toast appears in reaction to user action: creating, editing, deleting. ... form didn't save properly, it would still be open (+ error...

Toasts · Bootstrap v5.0

Click the button below to show a toast (positioned with our utilities in the ... <strong class="me-auto">Bootstrap</strong> <small class="text-muted">11 ...