-
Notifications
You must be signed in to change notification settings - Fork 41
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Migrate ContentSearch
component to TS
#325
Migrate ContentSearch
component to TS
#325
Conversation
Signed-off-by: Souptik Datta <[email protected]>
const ContentSearch = ({ | ||
onSelectItem, | ||
placeholder, | ||
interface QueryCache { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are many interfaces created for this component, therefore should it be better to move all the interfaces to another file say definitions.ts
, and just import from there?
/> | ||
|
||
{hasSearchString || hasInitialResults ? ( | ||
<> | ||
<List className={`${NAMESPACE}-list`}> | ||
{isLoading && currentPage === 1 && <StyledSpinner />} | ||
{isLoading && currentPage === 1 && <StyledSpinner onPointerEnterCapture={null} onPointerLeaveCapture={null} />} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Weirdly we have to pass these two props to Spinner (specifically to SVG-based component), to stop Typescript from complaining. Otherwise, Typescript throws an error.
There is a open issue for this on the Gutenberg repo - WordPress/gutenberg#61322
But the issue is setting these props throws warning in the console now by SVG element -
Signed-off-by: Souptik Datta <[email protected]>
Signed-off-by: Souptik Datta <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This works well in my testing :) Thanks for this enhancement!
Description of the Change
Migrate the
ContentSearch
component to TS.Found two bugs in the component, which are also fixed by this PR (Please let me know if any of these are expected feature and not a bug) -
subtype
.onBlur
event attached to the search bar, which hides the initial results whenever it's triggered. And when we try to click on any of those outside options, it just blurs out and the options just vanishes.Both the bugs are demonstrated in the below video -
Screen.Recording.2024-05-16.at.1.15.27.AM.mov
Related issue - #295 and #314
How to test the Change
Checklist: