Why Does the Parent Node of a Focused #text Node Return Null in Firefox?

Below is one approach to help ensure you’re working with an element instead of a text node (which may sometimes cause confusion between browsers):

1. Use Node Type Check

Before appending anything, check whether your focused node is a text node. If it is, use its parent element. For example:

JAVASCRIPTCopied
const sel = window.getSelection();
const focusNode = sel?.focusNode;

if (focusNode) {
  // If the node is a text node, get its parent element.
  const effectiveTarget = (focusNode.nodeType === Node.TEXT_NODE)
    ? focusNode.parentElement
    : focusNode;

  if (effectiveTarget) {
    // Now you can safely append your content
    effectiveTarget.append(rows);
    effectiveTarget.append('<click here to continue new line>');
    
    // Update the innerHTML of the last child node
    const nodes = effectiveTarget.childNodes;
    if (nodes.length > 0) {
      (nodes[nodes.length - 1]).innerHTML = '<click here to continue new line>';
    }
  } else {
    console.error("Effective target is null even though a node is focused.");
  }
} else {
  console.error("No focus node detected in the selection");
}

2. Consider Timing Issues

Browsers (especially Firefox) may update the selection asynchronously. If you suspect timing might be an issue, delaying your access to the parent node using a small timeout might help:

JAVASCRIPTCopied
setTimeout(() => {
  const sel = window.getSelection();
  const focusNode = sel?.focusNode;
  if (focusNode) {
    const effectiveTarget = (focusNode.nodeType === Node.TEXT_NODE)
      ? focusNode.parentElement
      : focusNode;

    if (effectiveTarget) {
      effectiveTarget.append(rows);
      effectiveTarget.append('<click here to continue new line>');
      
      const nodes = effectiveTarget.childNodes;
      if (nodes.length > 0) {
        (nodes[nodes.length - 1]).innerHTML = '<click here to continue new line>';
      }
    }
  }
}, 10); // small delay (10ms) to ensure selection is updated

3. Explanation

• Browser Differences: Chrome and Firefox differ in how they handle selection focus updates. By checking for Node.TEXT_NODE and then using .parentElement (which returns an Element node, or null if the parent is not an Element), you reduce the chance of encountering a null where you expect an HTML element.
• Race Conditions: Using a timer (or handling the appropriate DOM or selection events) can help ensure that your code runs after the browser has fully updated the selection. The repeated check technique (like your setInterval) could work too, but using a timeout or event listener may be more reliable.

By following the above approach, as long as the focused text node is properly attached to an element in your DOM, you should never see a null for its parent element.