feat(components): add option to delete input of text-input and lineage-filter input with x and sort text-input datalist options #631
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
This is a preview of the changelog of the next release. If this branch is not up-to-date with the current main branch, the changelog may not be accurate. Rebase your branch on the main branch to get the most accurate changelog. Note that this might contain changes that are on main, but not yet released. Changelog: 0.11.4 (2025-01-02)Features
Bug Fixes
|
…e-filter input with x and sort text-input datalist options
anna-parker
force-pushed
the
add_x_option
branch
from
c50bfb0 to
b58faae
Compare
anna-parker
requested review from
JonasKellerer,
fengelniederhammer and
chaoran-chen
| const [hasInput, setHasInput] = useState<boolean>(!!initialValue); | ||
| const [inputValue, setInputValue] = useState(initialValue || ''); |
There was a problem hiding this comment.
hasInput is redundant - it can be computed from inputValue
| const [hasInput, setHasInput] = useState<boolean>(!!initialValue); | |
| const [inputValue, setInputValue] = useState(initialValue || ''); | |
| const [inputValue, setInputValue] = useState(initialValue || ''); | |
| const hasInput = inputValue.length > 0; |
| onClick={() => { | ||
| if (inputRef.current) { | ||
| inputRef.current.value = ''; | ||
| onInput(); | ||
| } | ||
| }} |
There was a problem hiding this comment.
I don't like the side effects of this - I' propose to implement it as:
| onClick={() => { | |
| if (inputRef.current) { | |
| inputRef.current.value = ''; | |
| onInput(); | |
| } | |
| }} | |
| onClick={() => onInput(undefined)} |
(see other comments for how to adapt the rest)
| type='text' | ||
| class='input input-bordered w-full pr-10' | ||
| placeholder={placeholderText !== undefined ? placeholderText : lapisField} | ||
| onInput={onInput} |
There was a problem hiding this comment.
| onInput={onInput} | |
| onInput={() => onInput(inputRef.current?.value === '' ? undefined : inputRef.current?.value)} |
And change line 68 from
const onInput = () => {
const value = inputRef.current?.value === '' ? undefined : inputRef.current?.value;to
const onInput = (value?: string) => {| @@ -73,6 +76,8 @@ const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({ | |||
| composed: true, | |||
| }), | |||
| ); | |||
| setHasInput(value !== undefined); | |||
| setInputValue(value || ''); | |||
There was a problem hiding this comment.
Let's move this to the first line of this function - then you can even delete invalid input.
| @@ -73,6 +76,8 @@ const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({ | |||
| composed: true, | |||
| }), | |||
| ); | |||
| setHasInput(value !== undefined); | |||
| setInputValue(value || ''); | |||
There was a problem hiding this comment.
| setInputValue(value || ''); | |
| setInputValue(value ?? ''); |
| @@ -45,6 +45,9 @@ const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({ | |||
|
|
|||
| const inputRef = useRef<HTMLInputElement>(null); | |||
|
|
|||
| const [hasInput, setHasInput] = useState<boolean>(!!initialValue); | |||
| const [inputValue, setInputValue] = useState(initialValue || ''); | |||
There was a problem hiding this comment.
| const [inputValue, setInputValue] = useState(initialValue || ''); | |
| const [inputValue, setInputValue] = useState(initialValue ?? ''); |
| <button | ||
| type='button' | ||
| name='✕' | ||
| className='absolute top-1/2 right-2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700' |
There was a problem hiding this comment.
See https://daisyui.com/components/input/#text-input-with-icon-inside for a better way how to get the icon inside the "input field"
resolves #514
Summary
Currently deleting the input of the lineage or text field is tedious as it requires selecting the entire input and hitting deleting, this PR adds a simple x to delete input in one go. It also sorts the input of the text-input field.
Screenshot
Screen.Recording.2025-01-02.at.16.56.01.mov
PR Checklist