How can I fit the position of dropdown at current cursor position in textfield in react?

Question

In my code, dropdown shown when user type $ symbol, this is working fine, I wanted to when user gave $ symbol again that dropdown should be set at last position of curser but now dropdown is moving whatever we have clicked to text field, so how to fix that the dropdown should move relative to the cursor on the current text only?

This is fine but whenever we have type $ symbol at the first position dropdown should be move from last to initial position but its not working, so how to deal with that?

import { useState, useRef } from "react";
export default function App() {
  const [value, setValue] = useState("");
  const [show, setShow] = useState(false);
  const [cursor, setCursor] = useState(0);
  const ref = useRef(null);

  const foo = (e) => {
    setValue(e.target.value);
    if (e.nativeEvent.data === "$") {
      setShow(true);
    } else {
      setShow(false);
    }
    setCursor(Math.min(e.target.value?.length, 22) * 8);
  };
  const boo = (e) => {
    console.log(e.clientX);
    setCursor(e.clientX);
  };
  return (
    <div className="App">
      <input value={value} onChange={foo} ref={ref} onKeyDown={boo} />
      {show && (
        <div
          style={{
            width: "210px",
            height: "210px",
            background: "pink",
            marginLeft: cursor + "px",
            position: "absolute",
            left: "2px",
          }}
        >
          -DropDown-
        </div>
      )}
    </div>
  );
}

Answer 1

I tried to understand your problem. So you want to the dropdown show when user type $ and follow your cursor when you type or click on the input.

You can use the selectionStart to know the cursor position on the input.

With your example :

import { useState, useRef } from 'react';

export default function App() {
    const [value, setValue] = useState('');
    const [show, setShow] = useState(false);
    const [cursor, setCursor] = useState(0);
    const ref = useRef(null);

    const calculatePosition = position => Math.min(position, 22) * 8;

    const handleChange = e => {
        setValue(e.target.value);
        if (e.target.value === '' || !e.target.value.includes('$'))
            setShow(false); // If is empty or havent $ when change disable the dropdown
        else if (e.nativeEvent.data === '$') setShow(true);
    };

    const handlePosition = e => setCursor(calculatePosition(e.target.selectionStart)); // Get cursor position in the input
    const handleFocus = e => (e.target.value !== '' && e.target.value.includes('$') ? setShow(true) : null); // Show the dropdown if isn't empty and have $

    return (
        <div className='App'>
            <input
                ref={ref}
                value={value}
                onChange={handleChange}
                onClick={handlePosition}
                onKeyDown={handlePosition}
                onFocus={handleFocus}
                onBlur={() => setShow(false)} // If focus is lose hide the dropdown
            />
            {show && (
                <div
                    style={{
                        width: '210px',
                        height: '210px',
                        background: 'pink',
                        marginLeft: cursor + 'px',
                        position: 'absolute',
                        left: '2px',
                    }}
                >
                    -DropDown-
                </div>
            )}
        </div>
    );
}