CurrencyAlternative.jsx

import React, { useEffect, useRef } from 'react';
import { VaNumberInput } from '@department-of-veterans-affairs/component-library/dist/react-bindings';

const CurrencyInput = (props) => {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      console.log('Shadow root:', inputRef.current.shadowRoot);

      if (inputRef.current.shadowRoot) {
        const observer = new MutationObserver((mutations) => {
          mutations.forEach((mutation) => {
            if (mutation.addedNodes.length > 0) {
              const inputElement = inputRef.current.shadowRoot.querySelector('input');
              console.log('Input element:', inputElement);

              if (inputElement) {
                inputElement.style.paddingLeft = '20px';

                const currencySymbol = document.createElement('span');
                currencySymbol.textContent = '$';
                currencySymbol.style.position = 'absolute';
                currencySymbol.style.left = '8px';
                currencySymbol.style.top = '78%';
                currencySymbol.style.transform = 'translateY(-50%)';
                currencySymbol.style.pointerEvents = 'none';

                inputRef.current.shadowRoot.prepend(currencySymbol);

                // Disconnect the observer once the input element is found and modified
                observer.disconnect();
              }
            }
          });
        });

        // Observe changes in the shadow root
        observer.observe(inputRef.current.shadowRoot, { childList: true });
      }
    }
  }, []);

  return <VaNumberInput ref={inputRef} {...props} />;
};

export default CurrencyInput;