Allow non-control input elements to be visible inside of control components (#7494)

Author: ggdouglas

packages/core/src/common/classes.ts

@@ -194,6 +194,7 @@ export const TEXT_AREA = `${NS}-text-area`;
 export const TEXT_AREA_AUTO_RESIZE = `${TEXT_AREA}-auto-resize`;
 
 export const CONTROL = `${NS}-control`;
+export const CONTROL_INPUT = `${CONTROL}-input`;
 export const CONTROL_INDICATOR = `${CONTROL}-indicator`;
 export const CONTROL_INDICATOR_CHILD = `${CONTROL_INDICATOR}-child`;
 export const CHECKBOX = `${NS}-checkbox`;

packages/core/src/components/forms/_controls.scss

@@ -144,7 +144,7 @@ $control-indicator-spacing: $pt-grid-size !default;
     margin-inline-end: $pt-grid-size * 2;
   }
 
-  input {
+  .#{$ns}-control-input {
     left: 0;
     opacity: 0;
     position: absolute;

packages/core/src/components/forms/controls.tsx

@@ -69,7 +69,7 @@ const ControlInternal: React.FC<ControlInternalProps> = React.forwardRef<HTMLLab
         return React.createElement(
             tagName,
             { className: classes, ref, style },
-            <input {...htmlProps} ref={inputRef} type={type} />,
+            <input className={Classes.CONTROL_INPUT} {...htmlProps} ref={inputRef} type={type} />,
             <span className={Classes.CONTROL_INDICATOR}>{indicatorChildren}</span>,
             label,
             labelElement,