OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Quicklaunch duplicating services in the list

Browse Source 
Signed-off-by: Denis Papec <denis.papec@gmail.com>
This commit is contained in:
Denis Papec 2023-10-05 19:52:07 +01:00
parent 76cbb6e2ed
commit bd7058961e
No known key found for this signature in database
GPG Key ID: DE0912C69A47222C
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/quicklaunch.jsx
View File

@ -152,6 +152,11 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
return <span>{parts.map((part, i) => part.toLowerCase() === searchString.toLowerCase() ? <span key={`${searchString}_${i}`} className="bg-theme-300/10">{part}</span> : part)}</span>; return <span>{parts.map((part, i) => part.toLowerCase() === searchString.toLowerCase() ? <span key={`${searchString}_${i}`} className="bg-theme-300/10">{part}</span> : part)}</span>;
} }
function getRandomKeyId() {
// as these are dynamically generated elements, we can generate random keys
return Math.floor(Math.random() * 100000);
}
return ( return (
<div className={classNames( <div className={classNames(
"relative z-40 ease-in-out duration-300 transition-opacity", "relative z-40 ease-in-out duration-300 transition-opacity",
@ -168,7 +173,7 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
results.length === 0 && "rounded-md", results.length === 0 && "rounded-md",
"w-full p-4 m-0 border-0 border-b border-slate-700 focus:border-slate-700 focus:outline-0 focus:ring-0 text-sm md:text-xl text-theme-700 dark:text-theme-200 bg-theme-60 dark:bg-theme-800" "w-full p-4 m-0 border-0 border-b border-slate-700 focus:border-slate-700 focus:outline-0 focus:ring-0 text-sm md:text-xl text-theme-700 dark:text-theme-200 bg-theme-60 dark:bg-theme-800"
)} type="text" autoCorrect="false" ref={searchField} value={searchString} onChange={handleSearchChange} onKeyDown={handleSearchKeyDown} /> )} type="text" autoCorrect="false" ref={searchField} value={searchString} onChange={handleSearchChange} onKeyDown={handleSearchKeyDown} />
{results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto m-2"> {results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto m-2" key={`results-${getRandomKeyId()}`}>
{results.map((r, i) => ( {results.map((r, i) => (
<li key={r.container ?? r.app ?? `${r.name}-${r.href}`}> <li key={r.container ?? r.app ?? `${r.name}-${r.href}`}>
<button type="button" data-index={i} onMouseEnter={handleItemHover} onClick={handleItemClick} onKeyDown={handleItemKeyDown} className={classNames( <button type="button" data-index={i} onMouseEnter={handleItemHover} onClick={handleItemClick} onKeyDown={handleItemKeyDown} className={classNames(