What problem are you trying to solve with Submitty
#12065 overhauled the Discussion Forum's search functionality, significantly improving the UI/UX of the feature. With this PR came several small behaviors that should be addressed since this page is very high traffic.
-
When switching to the page, the x button to clear the search textarea is briefly visible, before disapearing (since nothing is typed)
https://github.com/user-attachments/assets/5456a1b9-7601-49bd-8530-60224ba99c93
-
When creating a thread, the x is visible, even though nothing is typed.
- The contents of the search persists on reload. THIS IS EXPECTED, since clicking from the general discussion forum thread to a specific page reloads the page, but this leads to some problems:
(1) After navigating away from a page, you may forget you have something typed in, and only be able to see a small subset of posts. It may not be immediately clear that you have to clear the filter.
(2) When you have something typed in and are in the threads page:

If you try to reload are navigate away, you get a browser alert about unsaved changes.
(3) On reload, the `Clear Filters` button goes away, when it should be the same functionality as the `x` button
- When the
x button is toggled, it shrinks the textarea. This is subtle, but it makes the UI feel unpolished.
Describe the way you'd like to solve this problem
Some of the layout issues come from the x (clear) button being outside of the textarea. Ideally, we should find a solution that works on all browsers to put it within the textarea. Perhaps looking at what other projects do could be useful here, I know GitHub has instances of this.
We need to brainstorm how to keep the result save the search on certain reloads, but not once the user navigates away. Maybe we should make the search functionality the same as the categories, where they don't persist on reload at all.
Describe any potential alternatives you'd tried to solve the problem
Some of these changes become easier once we port the discussion forum to Vue. Then, we wouldn't have to reload the page as much.
Overall, the forum search feature is an important piece of a high traffic page. It is essential that we keep the user experience in mind, because the little things go a long way.
What problem are you trying to solve with Submitty
#12065 overhauled the Discussion Forum's search functionality, significantly improving the UI/UX of the feature. With this PR came several small behaviors that should be addressed since this page is very high traffic.
When switching to the page, the
xbutton to clear the search textarea is briefly visible, before disapearing (since nothing is typed)https://github.com/user-attachments/assets/5456a1b9-7601-49bd-8530-60224ba99c93
When creating a thread, the
xis visible, even though nothing is typed.(1) After navigating away from a page, you may forget you have something typed in, and only be able to see a small subset of posts. It may not be immediately clear that you have to clear the filter.
(2) When you have something typed in and are in the threads page:
xbutton is toggled, it shrinks thetextarea. This is subtle, but it makes the UI feel unpolished.Describe the way you'd like to solve this problem
Some of the layout issues come from the
x(clear) button being outside of thetextarea. Ideally, we should find a solution that works on all browsers to put it within thetextarea. Perhaps looking at what other projects do could be useful here, I know GitHub has instances of this.We need to brainstorm how to keep the result save the search on certain reloads, but not once the user navigates away. Maybe we should make the search functionality the same as the categories, where they don't persist on reload at all.
Describe any potential alternatives you'd tried to solve the problem
Some of these changes become easier once we port the discussion forum to Vue. Then, we wouldn't have to reload the page as much.
Overall, the forum search feature is an important piece of a high traffic page. It is essential that we keep the user experience in mind, because the little things go a long way.