Can't type text in annotation card, or select tags that contain Twitter page shortcuts

[blackforestboi]

If reporting a bug:

1. Can you describe the problem and bug in more detail?

Twitter.com (and potentially other pages) have their own keyboard shortcuts (e.g. t & s).
If users type those keys to add a note to a highlight (annotate) or add a tag to an annotation, those keys are blocked.

2. How can we replicate the issue?

3. Go to twitter.com

4. select a piece of text

5. Write a comment or add a tag "test"

6. see only "es" being written

7. Expected behavior (i.e. solution)
   No interference, all keyboard strokes work.

8. Error stack (from extension crash page)

5. Other comments

[blackforestboi]

This issue is also affects other pages like github (s for search bar) and extensions like VIM.

Very likely a problem appearing through the shadowdom implementation.

Related? https://bugzilla.mozilla.org/show_bug.cgi?format=default&id=1439153

[poltak]

I spent some time having a look into this, but I'm yet to find a solution.

After doing a bit of debugging, what seems to be happening (at least for the <textarea> where you write your comments) is the keydown event gets fired for each key press and it ends up bubbling up to get caught by these sites' code (reproducible for me on twitter, google maps, github, cVim chrome ext).

Our handler for that event is here (note this is React virtual DOM handler):

Memex/src/sidebar-common/comment-box/components/comment-box-form.tsx

Lines 62 to 74 in 930d4b6

	private _handleTextAreaKeyDown = (
	e: React.KeyboardEvent<HTMLTextAreaElement>,
	) => {
	// Save comment.
	if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
	this.props.saveComment(e)
	} else if (e.key === 'Tab' && !e.shiftKey) {
	this.setTagInputActive(true)
	setTimeout(() => {
	this._tagInputRef.querySelector('input').focus()
	}, 0)
	}
	}

Calling stopPropagation() on that synth event doesn't seem to change anything.

One idea (though I could be way off):

keydown is one of the events that can propagate up out of the given shadow DOM tree, and listened to in the real DOM. Though this is only possible if the composed flag is set.
docs: https://developers.google.com/web/fundamentals/web-components/shadowdom#events

If you console.log the React synth event, you'll see that is indeed the case for this event (and seems like other React synth events). As we're using React here, we don't seem to have much control over these low level event stuff as we're limited to their API. Maybe there's a way around that though (I am yet to find anything googling around though, and the composed flag is readonly, i.e., not changeable after event instantiation).

How can we emit that keydown event without the composed flag being set to test this?

[poltak]

Do you have any time to look into this and see what ideas you have @ShishKabab ? I still cannot find any way around this in react and it's driving me crazy

[ShishKabab]

You'll only be able to transform reality to the will of your mind once you realize that reality does not exist... Or something like that. What I wanted to say was that React has it's own event handling system created for applications in a controllable environment. What I'd do, is just circumvent it entirely.

So, retrieve the real DOM element with a ref attribute (or whatever it's modern variant is), and add an event handler directly, with either DOMElement.addEventListener (interesting stuff to be found in [1]) or DOMElement.onclick = <handler>. Then just hope that React doesn't do anything evil, like overriding stuff or calling some kind of reset function.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

[poltak]

@ShishKabab Playing around with the (real) DOM element directly via refs, attaching event listeners directly to it bypassing the React virtual DOM APIs, also doesn't seem to change anything about the problem.

Though the issue here isn't necessarily the React vs the standard DOM event handling systems, it seems to be more about the events that are being emitted and the way they get constructed. i.e., the composed flag always being set which, going by the shadow DOM docs, does not seem to be desirable in our case - although is the case under both React virtual DOM and the "real" DOM.

Did you have a chance to read of the last part of my above comment, in particular the "One idea (though I could be way off):" part? Do you think that idea carries any weight, or I'm looking in the wrong direction? Or any other ideas?

[blackforestboi]

Currently planning out all next tasks. Because it has been (halfway) fixed, I would close this for now and put a bounty on investigating & fixing this issue.

[poltak]

Just putting it out there that the sidebar is still completely unusable with other extensions that use keybindings (keyboard navigation extensions are probably the main ones) and things like deleting previous inputs (backspace or pasting) doesn't work on websites.
If anyone takes this up later, feel free to ping me or look at #723 so we can try to get rid of that code