bug: Server/Settings/Categories - Empty Category Title exits text input

[ChrisGergler]

What happened?

Issue

Where
https://app.revolt.chat/server//settings/categories

When on Firefox and Edge, Adding Categories text input cancels with an empty string during category creation.

How to recreate
Click the + for a new Category
Erase all text from input
State changes out of editing

--- Version
a190a51 (master)Nightly 0.5.3-7API: 0.5.3-7revolt.js: 6.0.2

Branch

Production (app.revolt.chat)

Commit hash

a190a51

What browsers are you seeing the problem on?

Firefox, Microsoft Edge

Relevant log output

No response

Desktop

• Yes, this bug is specific to Revolt Desktop and is not an issue with Revolt Desktop itself.

PWA

• Yes, this bug is specific to the PWA.

[ChrisGergler]

I believe that this is happening under the /src/pages/settings/server/Categories.tsx

At line 334
setTitle?: (title: string) => void;
Does not permit a nullable string at any point. My guess is that once the edited value reaches empty, it exits the function for editing without saving and returns to the previous state.

If this is the case, then it should be possible to prevent the state from changing to saved if null, but allow it if !null

[LedaThemis]

I believe the issue is in line 375

revite/src/pages/settings/server/Categories.tsx

Lines 375 to 392 in a190a51

	{editing ? (
	<input
	value={editing}
	onChange={(e) =>
	setEditing(
	e.currentTarget.value,
	)
	}
	onKeyDown={(e) =>
	e.key === "Enter" && save()
	}
	id={category.id}
	/>
	) : (
	<span onClick={startEditing}>
	{category.title}
	</span>
	)}

where the input element goes back to a span if editing (which holds the current category title) is falsy, and an empty string is falsy

[LedaThemis]

Changing line 375 from editing ? to editing !== undefined ? solves the issue, but it makes it possible to submit an empty string as a category name which is invalid.

[LedaThemis]

Replacing the current save() function

revite/src/pages/settings/server/Categories.tsx

Lines 345 to 348 in a190a51

	const save = useCallback(() => {
	setEditing(undefined);
	setTitle!(editing!);
	}, [editing, setTitle]);

with the following:

const save = useCallback(() => {
    setEditing(undefined);
    if (editing !== "") {
        setTitle!(editing!);
    }
}, [editing, setTitle]);

solves the empty string submission issue.

an alternative would be:

const save = useCallback(() => {
    setEditing(undefined);
    if (editing) {
        setTitle!(editing);
    }
}, [editing, setTitle]);

but I believe the first one is clearer.

---

Another bug is that entering any category name then switching to edit another category name does save() the name, except if the name is empty, then the UI keeps the category name as empty but it never submits it, and that's because of the following:

revite/src/pages/settings/server/Categories.tsx

Line 351 in a190a51

if (!editing) return;

which should be changed to

if (editing === undefined) return;

Preview:

[insertish]

Closing due to rewrite, marking as potential issue in future by linking to revoltchat/frontend#134.