Improve SearchBar - Githubissues

paranext / paranext-core

Electron client, extension host, and C# library for Paranext

https://paranext.github.io/paranext-core/

MIT License

17 stars 2 forks source link

Improve SearchBar #846

Open jolierabideau opened 6 months ago

jolierabideau commented 6 months ago

Describe the bug

If you set isFullWidth to false, the TextField is shortened but not the Paper

Screenshot 2024-04-09 at 1 30 25 PM

If you try to hit 'Enter' to search or use this SearchBar in a form, you will get this error: Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set. This SearchBar was built as a dynamic filter- it was not intended to be "submitted." Removing component="form" from the Paper element would probably solve this issue.

To Reproduce Steps to reproduce 1) isFullWidth:

<SearchBar isFullWidth={false} onSearch={() => logger.info('searching')} />
SearchBar is not completely shortened

Steps to reproduce 2) Form submission error

<SearchBar onSearch={() => logger.info('searching')} />
Hit 'Enter' inside the SearchBar, will log above error in console.

Expected behavior

[ ] When a user does not provide a value for isFullWidth or they provide isFullWidth={false}, the TextField and Paper have matching widths.
[ ] Remove component="form" from the Paper element so that the SearchBar does not cause the form submit error
[ ] ?? Rename the SearchBar to something like: SearchFilter, DynamicFilter, FilterBar ??

roopa0222 commented 4 months ago

Verified the issues is resolved with https://github.com/paranext/paranext-core/pull/924 Tested and everything is working as it supposed to. Error message is not displayed when 'Enter' is hit .

SearchBarCompFix