Input box Backspace events are prevented
I am injecting buttons in a website that opens various modals for people to fill out forms.
Everything is working except when I press the backspace button to delete characters from textboxes. Nothing happens.
I logged the Backspace keyboard event and see defaultPrevented: True
I am not sure how this is happening. I am wondering if something from Plasmo could be interfering with something on this website?
I have the same textboxes in the options page of the extension and backspace works fine.
I have included a screenshot of the logged event.
Any help/guidance would be greatly appreciated.
11 Replies
@spopa How are you injecting the state into this input btw?
(ref: https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)
– React
The library for web and native user interfaces
Would be helpful to see some code snippet. In React, most event should be Synthetic. However this one is a raw KeyboardEvent, so I suspect you might be binding them wrongly :-?
Hi @louis, thanks for the response. Looks like I am doing what that guide is saying. Here is a tiny snippet of my code for one textbox in a modal:
import { useEffect, useRef, useState } from "react"
export default function SelectEodModal({ onClose, onSubmit }: { onClose: () => void; onSubmit: (selectedOption: string) => Promise<void> }) {
const eodFormRef = useRef(null)
const [selectedTextVisitStatusOther, setSelectedTextVisitStatusOther] = useState("")
const handleSelectedTextVisitStatusOther = (e) => {
const value = e.target.value
setSelectedTextVisitStatusOther(value)
}
return (
<div className="font-sans bg-white rounded-lg shadow-lg p-4 text-center">
<form id="eodForm" className="modal-content" ref={eodFormRef}>
<div id="other-input-container" className="mt-1">
<label>Please specify: </label>
<input type="text" className="w-full p-1 text-sm" value={selectedTextVisitStatusOther} onChange={handleSelectedTextVisitStatusOther} required />
</div>
</form>
</div>
)
}`
I am using PlasmoGetInlineAnchorList to get all rows in a table to inject a button in each row. When you click on the button, it opens up the modal.
I also noticed that the faxing modal that you helped with in the past also does not allow you to use the backspace button to delete characters in the textbox.
I'm thinking this might not be a Plasmo issue, but maybe a CSS issue or possibly something else? Could a CSS issue prevent backspace from working in a modal? All other keys I've tried using work in the textbox.
Gave +1 Rep to @louis
afaik, the CSUI at the framework level is only responsible for injecting the component into the page - event propagations are therefore user-space code.
Is it possible that in any of the component above this, there's an
e.preventDefault being applied?...
it's very weird that it's doing it just for the backspace event tho...Might also be related: https://stackoverflow.com/questions/13952071/input-readonly-backspace-issue
Stack Overflow
Input readonly backspace issue
In my input element, when I navigate to the element and enter the backspace key using keyboard, it navigates to the previous page, when I set the input is readonly.
My code is below. Please share...
Some page might preventDefault any backspace at all to prevent navigating back (?)...
so you might need to override that behavior in your input and return true on backspace keypress :-? https://stackoverflow.com/questions/49263039/backspace-not-working-in-firefox-in-input-field
Stack Overflow
Backspace not working in Firefox in input field
I have this input filed with an onkeypress event:
<input type="number" min = "0" id = "count" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
Basically this
So on the actual website's textboxes, the backspace event works and preventDefault is false.
I've tried adding the onkeydown and onkeypress but they are deprecated and didn't work. I also tried adding an event listener and trying things in there (I see the Backspace pressed log):
document.addEventListener('keydown', function (event) {
console.log('event ', event)
if (event.key === 'Backspace') {
console.log('Backspace pressed')
// return event.charCode >= 48 && event.charCode <= 57 || event.key === "Backspace"
// return event.preventDefault() // Prevent default behavior
// return event.defaultPrevented == false
// return true
}
})
It is a read-only field. Trying to change it didn't work. I don't have any e.preventDefault's applied elsewhere. And yea, delete works just fine as well as everything else. Just not backspace. Super weird.
@spopa has reached level 1. GG!