coco/ixion
coco
/
ixion
mirror of https://github.com/cocosolos/ixion.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Hide URL input field when loss of focus

This commit is contained in:
Corey 2024-05-23 22:50:18 -04:00
parent 1bbd4569a8
commit ae4a3d9954
Signed by: coco
GPG Key ID: 051138DA6AEE3E60
1 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/components/Header/AddServer.tsx
View File

@ -59,11 +59,12 @@ export default function AddServer({ servers, setServers }: AddServerProps) {
setShowAddServer((prev) => !prev); setShowAddServer((prev) => !prev);
}; };
const handleSubmit = async (event: React.KeyboardEvent<HTMLFormElement>) => { const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault();
if (inputRef.current) { if (inputRef.current) {
const inputText = inputRef.current.value; const inputText = inputRef.current.value;
setIsLoading(true); setIsLoading(true);
try {
const response = await postData(inputText); const response = await postData(inputText);
if (response.success) { if (response.success) {
showAlert({ showAlert({
@ -74,18 +75,26 @@ export default function AddServer({ servers, setServers }: AddServerProps) {
navigate(`/server/${encodeURIComponent(response.data.url)}`); navigate(`/server/${encodeURIComponent(response.data.url)}`);
setServers([response.data, ...servers]); setServers([response.data, ...servers]);
} }
if (inputRef.current) {
inputRef.current.value = '';
toggleShowAddServer(); toggleShowAddServer();
} inputRef.current.value = '';
} else { } else {
showAlert({ showAlert({
message: response.message || 'Failed to send data to backend.', message: response.message || 'Failed to send data to backend.',
severity: 'error', severity: 'error',
}); });
setTimeout(() => {
inputRef.current?.focus();
}, 0);
} }
} catch (error) {
showAlert({
message: 'An error occurred during submission.',
severity: 'error',
});
} finally {
setIsLoading(false); setIsLoading(false);
} }
}
}; };
const handleKeyUp = async (event: React.KeyboardEvent<HTMLInputElement>) => { const handleKeyUp = async (event: React.KeyboardEvent<HTMLInputElement>) => {
@ -93,7 +102,7 @@ export default function AddServer({ servers, setServers }: AddServerProps) {
case 'Escape': { case 'Escape': {
if (inputRef.current) { if (inputRef.current) {
if (inputRef.current.value === '') { if (inputRef.current.value === '') {
toggleShowAddServer(); inputRef.current.blur();
} else { } else {
inputRef.current.value = ''; inputRef.current.value = '';
} }
@ -104,6 +113,12 @@ export default function AddServer({ servers, setServers }: AddServerProps) {
} }
}; };
const handleBlur = () => {
if (!isLoading && inputRef.current && inputRef.current.value === '') {
toggleShowAddServer();
}
};
return ( return (
<> <>
<Box ref={containerRef} className="overflow-hidden pl-4"> <Box ref={containerRef} className="overflow-hidden pl-4">
@ -123,6 +138,7 @@ export default function AddServer({ servers, setServers }: AddServerProps) {
'aria-label': 'add-server', 'aria-label': 'add-server',
}} }}
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
onBlur={handleBlur}
disabled={isLoading} disabled={isLoading}
endAdornment={ endAdornment={
isLoading && ( isLoading && (