feat(query-builder): Allow pasting without requiring user permissions #74054
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
Scope: Frontend
malwilley
commented
Jul 9, 2024
| const {size} = useSearchQueryBuilder(); | ||
| const {state, gridProps} = useQueryBuilderGrid(props, ref); | ||
|
|
||
| const state = useListState<ParseResultToken>({ |
There was a problem hiding this comment.
Had to move some things around to pass the undo function into the new component.
malwilley
commented
Jul 9, 2024
| @@ -17,59 +13,26 @@ interface UseQueryBuilderGridProps extends AriaGridListOptions<ParseResultToken> | |||
|
|
|||
| const noop = () => {}; | |||
|
|
|||
| function findNearestFreeTextKey( | |||
There was a problem hiding this comment.
Most of the changes in this file are moving the onKeyDown logic from here to the new component
Bundle ReportChanges will increase total bundle size by 2.0kB ⬆️
|
malwilley
commented
Jul 10, 2024
| undo: () => void; | ||
| }; | ||
|
|
||
| function findNearestFreeTextKey( |
There was a problem hiding this comment.
This function is unchanged from the file it was moved from
malwilley
commented
Jul 10, 2024
| [dispatch, selectedTokens] | ||
| ); | ||
|
|
||
| const onKeyDown = useCallback( |
There was a problem hiding this comment.
All this logic is copied over from useQueryBuilderGrid, the only new part of this component is the rendered input and the onPaste handler
malwilley
deleted the
malwilley/feat/search-query-builder-paste-without-permissions
branch
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently when there is a selection, the focus is on the top-level grid div (because there is nowhere else for the focus to go). We have been listening for keydown events here, which works for everything except pasting, because divs do not have the
onPasteevent. Currently we are accessing the clipboard withnavigator.clipboard.readText(), but that requires the user to grant permission which is not a good experience.To solve this, we now render an invisible input within the grid (
<SelectionKeyHandler />), which receives focus when there is a selection. Since this input needs to handle the paste event, I also moved all the selection-specific keydown logic there as well.