use forwardRef for all the simple wrapper components just in case

extension/data/components/controls/ActionButton.tsx

@@ -1,16 +1,17 @@
-import {type ComponentPropsWithoutRef} from 'react';
+import {type ComponentPropsWithoutRef, forwardRef} from 'react';
 import {classes} from '../../util/ui_interop';
 import css from './ActionButton.module.css';
 
-export const ActionButton = ({
+export const ActionButton = forwardRef<HTMLButtonElement>(({
     inline,
     className,
     ...props
 }: ComponentPropsWithoutRef<'button'> & {
     inline?: boolean;
-}) => (
+}, ref) => (
     <button
         className={classes(css.actionButton, inline && css.inline, className)}
         {...props}
+        ref={ref}
     />
-);
+));

extension/data/components/controls/ActionSelect.tsx

@@ -1,16 +1,17 @@
-import {type ComponentPropsWithoutRef} from 'react';
+import {type ComponentPropsWithoutRef, forwardRef} from 'react';
 import {classes} from '../../util/ui_interop';
 import css from './ActionSelect.module.css';
 
-export const ActionSelect = ({
+export const ActionSelect = forwardRef<HTMLSelectElement>(({
     inline,
     className,
     ...props
 }: ComponentPropsWithoutRef<'select'> & {
     inline?: boolean;
-}) => (
+}, ref) => (
     <select
         className={classes(css.actionSelect, inline && css.inline, className)}
         {...props}
+        ref={ref}
     />
-);
+));

extension/data/components/controls/BracketButton.tsx

@@ -1,16 +1,17 @@
-import {type ComponentPropsWithoutRef} from 'react';
+import {type ComponentPropsWithoutRef, forwardRef} from 'react';
 import {classes} from '../../util/ui_interop';
 import css from './BracketButton.module.css';
 
-export const BracketButton = ({
+export const BracketButton = forwardRef<HTMLButtonElement>(({
     inline,
     className,
     ...props
 }: ComponentPropsWithoutRef<'button'> & {
     inline?: boolean;
-}) => (
+}, ref) => (
     <button
         className={classes(css.bracketButton, className)}
         {...props}
+        ref={ref}
     />
-);
+));

extension/data/components/controls/GeneralButton.tsx

@@ -1,16 +1,17 @@
-import {type ComponentPropsWithoutRef} from 'react';
+import {type ComponentPropsWithoutRef, forwardRef} from 'react';
 import {classes} from '../../util/ui_interop';
 import css from './GeneralButton.module.css';
 
-export const GeneralButton = ({
+export const GeneralButton = forwardRef<HTMLButtonElement>(({
     inline,
     className,
     ...props
 }: ComponentPropsWithoutRef<'button'> & {
     inline?: boolean;
-}) => (
+}, ref) => (
     <button
         className={classes(css.generalButton, className)}
         {...props}
+        ref={ref}
     />
-);
+));