Show HN: Fixing ChatGPT's losing-focus bug

#1

Post by oceanparkway » Sat, Dec 30, 2023, 4:38 PM UTC

When you select a paragraph in ChatGPT's UI as it's streaming in, your focus on the element is continuously lost each time a new text character streams in, so if you try and copy and select something mid-stream, it's a moving target. I wrote up a simple/quick fix.

I imagine landing the actual fix for them would be more difficult given they embed different elements alongside text, e.g. code blocks, which is where I first noticed this issue (trying to select a short snippit of code from a long block as it streams in).

Show HN: Fixing ChatGPT's losing-focus bug
chatgpt-ui-fix.vercel.app

Re: Show HN: Fixing ChatGPT's losing-focus bug

#2

Post by hidelooktropic » Tue, Jan 02, 2024, 4:34 AM UTC

I love this and was trying to recreate this (it used to work on ChatGPT) using pure HTML and JS. Would love to know what exactly react is doing that allows it to be selectable in this way, does it append to text node? What is allowing to work if it's streaming a few layers down like an li inside a ul inside an li inside an ol?

Re: Show HN: Fixing ChatGPT's losing-focus bug

#3

Post by oceanparkway » Thu, Jan 04, 2024, 2:46 PM UTC

hidelooktropic wrote: post #2

I love this and was trying to recreate this (it used to work on ChatGPT) using pure HTML and JS. Would love to know what exactly react is doing that allows it to be selectable in this way, does it append to text node? What is allowing to work if it's streaming a few layers down like an li inside a ul inside an li inside an ol?

The DOM allows multiple text nodes of an element.

When you update the React tree with a different/longer paragraph node, it's actually removing the element and replacing it with a new one and the selection state is blown away. This is solved in non-text elements by a very simple diffing algorithm that says, as long as it's not a list with .map (which why is why .map triggers a linter rule warning you to use keys), if it is an element with the same tag ( is the same as but different than ) then React uses DOM nudging to modify the element as opposed to unmounting it from the DOM and replacing it.

Text nodes work differently in the DOM. If you open up devtools and edit a paragraph while its selected in the browser, you'll see the same effect. Try doing the manipulation with JS, same thing (document.querySelector(a_selector).innerText += 'sdfsdf').

Using Fragments instructs React to append multiple text nodes to the same parent, which means we're simply appending nodes instead of blowing them away, which solves the selection state issue.

All made possible by the fact that browsers just cleanly reconstitute the text fragments back together into display text.

Unfortunately this approach does seem to break the built-in apple screenreader, but then I placed the screenreader on ChatGPT and saw how it already totally was failing. It seems surprising to me that OpenAI wouldn't have addressed this access issue. I guess there may be a whole extensive implementation issue with streaming text and screenreaders in general.