fix: slash menu tabs - prevent editor focus loss on click with onMouseDown preventDefault
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 43s

This commit is contained in:
2026-05-02 22:10:56 +02:00
parent 8e07594ba2
commit 8ef67dcc1f

View File

@@ -441,9 +441,10 @@ function SlashCommandMenu({ editor, onInsertImage }: { editor: Editor; onInsertI
<div ref={menuRef} className="notion-slash-menu" style={{ top: coords.top, left: coords.left }} onClick={(e) => e.stopPropagation()}> <div ref={menuRef} className="notion-slash-menu" style={{ top: coords.top, left: coords.left }} onClick={(e) => e.stopPropagation()}>
{/* Category tabs */} {/* Category tabs */}
{!query && totalVisible > 1 && ( {!query && totalVisible > 1 && (
<div className="notion-slash-tabs"> <div className="notion-slash-tabs" onMouseDown={(e) => e.preventDefault()}>
<button <button
className={cn('notion-slash-tab', !activeCategory && 'notion-slash-tab-active')} className={cn('notion-slash-tab', !activeCategory && 'notion-slash-tab-active')}
onMouseDown={(e) => e.preventDefault()}
onClick={() => { setActiveCategory(null); setSelectedIndex(0) }} onClick={() => { setActiveCategory(null); setSelectedIndex(0) }}
> >
Tout Tout
@@ -452,6 +453,7 @@ function SlashCommandMenu({ editor, onInsertImage }: { editor: Editor; onInsertI
<button <button
key={cat} key={cat}
className={cn('notion-slash-tab', activeCategory === cat && 'notion-slash-tab-active', cat === 'IA Note' && 'notion-slash-tab-ai')} className={cn('notion-slash-tab', activeCategory === cat && 'notion-slash-tab-active', cat === 'IA Note' && 'notion-slash-tab-ai')}
onMouseDown={(e) => e.preventDefault()}
onClick={() => { setActiveCategory(activeCategory === cat ? null : cat); setSelectedIndex(0) }} onClick={() => { setActiveCategory(activeCategory === cat ? null : cat); setSelectedIndex(0) }}
> >
{cat === 'IA Note' && <Sparkles className="w-2.5 h-2.5" />} {cat === 'IA Note' && <Sparkles className="w-2.5 h-2.5" />}
@@ -488,6 +490,7 @@ function SlashCommandMenu({ editor, onInsertImage }: { editor: Editor; onInsertI
key={item.title} key={item.title}
ref={isSelected ? selectedItemRef : null} ref={isSelected ? selectedItemRef : null}
className={cn('notion-slash-item', isSelected && 'notion-slash-item-selected')} className={cn('notion-slash-item', isSelected && 'notion-slash-item-selected')}
onMouseDown={(e) => e.preventDefault()}
onClick={() => handleSelect(item)} onClick={() => handleSelect(item)}
onMouseEnter={() => setSelectedIndex(idx)} onMouseEnter={() => setSelectedIndex(idx)}
> >