diff --git a/ui/v2.5/src/components/Tagger/scenes/Config.tsx b/ui/v2.5/src/components/Tagger/scenes/Config.tsx index f05cc5f52..1ed137fb0 100644 --- a/ui/v2.5/src/components/Tagger/scenes/Config.tsx +++ b/ui/v2.5/src/components/Tagger/scenes/Config.tsx @@ -23,28 +23,31 @@ const Config: React.FC = ({ show }) => { const intl = useIntl(); const blacklistRef = useRef(null); - const removeBlacklist = (index: number) => { - setConfig({ - ...config, - blacklist: [ - ...config.blacklist.slice(0, index), - ...config.blacklist.slice(index + 1), - ], - }); - }; - - const handleBlacklistAddition = () => { + function addBlacklistItem() { if (!blacklistRef.current) return; const input = blacklistRef.current.value; - if (input.length === 0) return; + if (!input) return; + // don't add duplicate items + if (!config.blacklist.includes(input)) { + setConfig({ + ...config, + blacklist: [...config.blacklist, input], + }); + } + + blacklistRef.current.value = ""; + } + + function removeBlacklistItem(index: number) { + const newBlacklist = [...config.blacklist]; + newBlacklist.splice(index, 1); setConfig({ ...config, - blacklist: [...config.blacklist, input], + blacklist: newBlacklist, }); - blacklistRef.current.value = ""; - }; + } return ( @@ -61,7 +64,7 @@ const Config: React.FC = ({ show }) => { } checked={config.showMales} - onChange={(e: React.ChangeEvent) => + onChange={(e) => setConfig({ ...config, showMales: e.currentTarget.checked }) } /> @@ -75,7 +78,7 @@ const Config: React.FC = ({ show }) => { } checked={config.setCoverImage} - onChange={(e: React.ChangeEvent) => + onChange={(e) => setConfig({ ...config, setCoverImage: e.currentTarget.checked, @@ -95,7 +98,7 @@ const Config: React.FC = ({ show }) => { } className="mr-4" checked={config.setTags} - onChange={(e: React.ChangeEvent) => + onChange={(e) => setConfig({ ...config, setTags: e.currentTarget.checked }) } /> @@ -104,7 +107,7 @@ const Config: React.FC = ({ show }) => { className="col-md-2 col-3 input-control" as="select" value={config.tagOperation} - onChange={(e: React.ChangeEvent) => + onChange={(e) => setConfig({ ...config, tagOperation: e.currentTarget.value as TagOperation, @@ -135,7 +138,7 @@ const Config: React.FC = ({ show }) => { as="select" className="col-md-2 col-3 input-control" value={config.mode} - onChange={(e: React.ChangeEvent) => + onChange={(e) => setConfig({ ...config, mode: e.currentTarget.value as ParseMode, @@ -182,7 +185,7 @@ const Config: React.FC = ({ show }) => { } checked={config.markSceneAsOrganizedOnSave} - onChange={(e: React.ChangeEvent) => + onChange={(e) => setConfig({ ...config, markSceneAsOrganizedOnSave: e.currentTarget.checked, @@ -199,9 +202,18 @@ const Config: React.FC = ({ show }) => { - + ) => { + if (e.key === "Enter") { + addBlacklistItem(); + e.preventDefault(); + } + }} + /> - @@ -221,7 +233,7 @@ const Config: React.FC = ({ show }) => { {item.toString()}