[Bug] Prompts function not working properly

[bentwnghk]

Describe the bug #1126 The issue still persists, even after applying the updates.

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Deployment

• [x] Docker
• [ ] Vercel
• [ ] Server

Desktop (please complete the following information):

• OS: [Windows 11]
• Browser [Chrome, Edge]

[Yidadaa]

please provide a screen record

[bentwnghk]

https://mr5drive.com/s/aH35XtkHcCZL7EM

[yanCode]

@bentwnghk , you are right, after @Yidadaa's fix, this issue can still reproduce in my local env. (mac osx, m1 chipset, 16G Ram, latest Chrome browser ). if you want to reproduce it and finding the reason, please follow below steps:

const onPromptSelect = (prompt: Prompt) => {
    setPromptHints([]);
    inputRef.current?.focus();
    setTimeout(() => setUserInput(prompt.content), 60);
  };

inside this event handler, you can add a line of console.log("onPromptSelect is calling") then run the server locally, do it multi times to try to select a prompt, you can find many times (7,8 of 10 times in my local env) selecting Prompts fails, when failing, you can see console.log("onPromptSelect is calling") prints nothing.

for me, i think before the click event starts from the selected prompt item, the blur event listener already started one step eariler to work

onBlur={() => {
              setTimeout(() => {
                if (document.activeElement !== inputRef.current) {
                  setAutoScroll(false);
                  setPromptHints([]);
                }
              }, 100);
            }}

in which it sets setPromptHints([]), so it looks a prompt is clicked in the UI, but actually before it getting clicked, onBlur already removed any the prompt elements, so the prompt click event can never been triggered. so if you set the setTimeout ms number from 100 to 500, the failed selecting prompts starts to work.

but for me, I don't think to increase the time of setTimeout for the app to wait is a great solution.

I am providing a pull request to this issue right away. here is my pull request: https://github.com/Yidadaa/ChatGPT-Next-Web/pull/1216

[yanCode]

this is a footage i updated to discord https://discord.com/channels/1089481140232011828/1089481141372846174/1103141893547761684 FYI

[Yidadaa]

Can not reproduce this problem on windows 11 (ms edge), but I can guess the reason, and I will submit a pr to try to fix it later.

[bentwnghk]

Merging the pull request #1220 has successfully fixed this issue 👍