Browser text selection highlight disappears when showing custom toolbar on selection

[jonah2xm]

Summary

Hi — I have a Next.js (App Router) reader page where I show a floating toolbar after the user selects text. When the toolbar appears, the browser's native selection highlight (the blue/OS-specific highlight) disappears, making the selection invisible.

I believe the toolbar or the render/update step is causing the selection to be lost or to lose its native highlight.

Minimal reproduction / relevant files

File: src/app/reader/(sections)/(content)/index.jsx
Relevant selection and rendering logic (I call this on mouse up):

// onMouseUp handler inside each page element
const onSelectText = (e, page) => {
  const sel = window.getSelection();
  if (!sel || sel.isCollapsed) return;

  const txt = sel.toString().trim();
  if (!txt) return;

  setSelectedTextPage(page);
  setSelectedText(txt);
  setSelectionPosition({ x: e.clientX + 50, y: e.clientY + 20 });

  // compute target paragraph and offsets...
  const range = sel.getRangeAt(0);
  const preRange = document.createRange();
  preRange.selectNodeContents(targetElement);
  preRange.setEnd(range.startContainer, range.startOffset);
  const start = preRange.toString().length;
  const end = start + range.toString().length;
  setSelectedMatchOffsets({ start, end });
};

File: SelectionTooltip (shown after selection)

<div
  ref={tooltipRef}
  className="absolute bg-white dark:bg-gray-800 shadow-lg rounded-lg p-2 flex space-x-2 select-text"
  style={{
    top: `${selectionPosition.y}px`,
    left: `${selectionPosition.x}px`,
    display: selectedText.length ? "flex" : "none",
  }}
>
  {/* popovers / buttons */}
</div>

Environment

• Next.js (App Router)
• Tailwind CSS + custom components
• React state toggles toolbar visibility on selection
• Toolbar contains buttons/popovers (focusable elements)

Expected Behavior

The selected text should remain highlighted while showing the floating toolbar.

Actual Behavior

When the toolbar appears, the browser removes the native selection highlight, making the selection invisible.

Additional information

No response

Example

No response

[elhadjx]

having the same problem !!

[KaloudasDev]

Hello! This is a common issue when showing custom UI elements after text selection. The problem occurs because focusing on your toolbar elements causes the browser to lose the native selection highlight. Here's the solution:

Preserve Selection While Showing Toolbar

const onSelectText = (e, page) => {
    const sel = window.getSelection();
    if (!sel || sel.isCollapsed) return;
    
    const txt = sel.toString().trim();
    if (!txt) return;

    const range = sel.getRangeAt(0);
    const savedRange = range.cloneRange();
    
    setSelectedTextPage(page);
    setSelectedText(txt);
    setSelectionPosition({ x: e.clientX + 50, y: e.clientY + 20 });

    setTimeout(() => {
        sel.removeAllRanges();
        sel.addRange(savedRange);
    }, 0);

    const preRange = document.createRange();
    preRange.selectNodeContents(targetElement);
    preRange.setEnd(range.startContainer, range.startOffset);
    const start = preRange.toString().length;
    const end = start + range.toString().length;
    setSelectedMatchOffsets({ start, end });
};

Enhanced Toolbar Component

const SelectionTooltip = ({ selectedText, selectionPosition }) => {
    const tooltipRef = useRef(null);

    const handleToolbarInteraction = useCallback(() => {
        const sel = window.getSelection();
        if (sel.rangeCount > 0) {
            const range = sel.getRangeAt(0).cloneRange();
            setTimeout(() => {
                sel.removeAllRanges();
                sel.addRange(range);
            }, 0);
        }
    }, []);

    return (
        <div
            ref={tooltipRef}
            className="absolute bg-white dark:bg-gray-800 shadow-lg rounded-lg p-2 flex space-x-2 select-text"
            style={{
                top: `${selectionPosition.y}px`,
                left: `${selectionPosition.x}px`,
                display: selectedText.length ? "flex" : "none",
            }}
            onMouseDown={(e) => e.preventDefault()}
            onClick={handleToolbarInteraction}
        >
            {/* Your toolbar buttons */}
        </div>
    );
};

Key Solutions:

• Clone and restore the selection after UI updates
• Use setTimeout to ensure restoration happens in next event cycle
• Prevent default behavior on toolbar mouse events
• Maintain selection range during toolbar interactions

This approach preserves the native text selection highlight while your custom toolbar remains visible and interactive.