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

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

@ -59,32 +59,41 @@ 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);
const response = await postData(inputText); try {
if (response.success) { const response = await postData(inputText);
showAlert({ if (response.success) {
message: response.message, showAlert({
severity: 'success', message: response.message,
}); severity: 'success',
if (response.data && typeof response.data === 'object') { });
navigate(`/server/${encodeURIComponent(response.data.url)}`); if (response.data && typeof response.data === 'object') {
setServers([response.data, ...servers]); navigate(`/server/${encodeURIComponent(response.data.url)}`);
} setServers([response.data, ...servers]);
if (inputRef.current) { }
inputRef.current.value = '';
toggleShowAddServer(); toggleShowAddServer();
inputRef.current.value = '';
} else {
showAlert({
message: response.message || 'Failed to send data to backend.',
severity: 'error',
});
setTimeout(() => {
inputRef.current?.focus();
}, 0);
} }
} else { } catch (error) {
showAlert({ showAlert({
message: response.message || 'Failed to send data to backend.', message: 'An error occurred during submission.',
severity: 'error', severity: 'error',
}); });
} finally {
setIsLoading(false);
} }
setIsLoading(false);
} }
}; };
@ -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 && (