fix: omit props passing to DOM element (#7181)

app/client/src/comments/CommentThread/CommentThread.tsx

@@ -30,7 +30,8 @@ import { getViewModePageList } from "selectors/editorSelectors";
 import { APP_MODE } from "entities/App";
 
 const ThreadContainer = styled(animated.div).withConfig({
-  shouldForwardProp: (prop) => !["visible", "inline"].includes(prop),
+  shouldForwardProp: (prop) =>
+    !["visible", "inline", "maxHeight"].includes(prop),
 })<{
   visible?: boolean;
   inline?: boolean;

app/client/src/components/ads/TextInput.tsx

@@ -10,6 +10,7 @@ import {
 import { isEmail } from "utils/formhelpers";
 
 import { AsyncControllableInput } from "@blueprintjs/core/lib/esm/components/forms/asyncControllableInput";
+import _ from "lodash";
 
 export type Validator = (
   value: string,
@@ -85,16 +86,26 @@ const boxStyles = (
 
 const StyledInput = styled((props) => {
   // we are removing non input related props before passing them in the components
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // eslint-disable @typescript-eslint/no-unused-vars
-  const { dataType, inputRef, inputStyle, theme, ...inputProps } = props;
+  const { dataType, inputRef, ...inputProps } = props;
+
+  const omitProps = [
+    "inputStyle",
+    "rightSideComponentWidth",
+    "theme",
+    "validator",
+    "isValid",
+    "cypressSelector",
+  ];
+
   return props.asyncControl ? (
     <AsyncControllableInput
-      {...inputProps}
+      {..._.omit(inputProps, omitProps)}
-      dataType={dataType}
+      datatype={dataType}
       inputRef={inputRef}
     />
   ) : (
-    <input ref={inputRef} {...inputProps} />
+    <input ref={inputRef} {..._.omit(inputProps, omitProps)} />
   );
 })<
   TextInputProps & {

app/client/src/components/designSystems/appsmith/IconButtonComponent.tsx

@@ -7,6 +7,7 @@ import { IconName } from "@blueprintjs/icons";
 import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
 import { ThemeProp } from "components/ads/common";
 import { WIDGET_PADDING } from "constants/WidgetConstants";
+import _ from "lodash";
 import {
   ButtonBorderRadius,
   ButtonBorderRadiusTypes,
@@ -34,7 +35,19 @@ export interface ButtonStyleProps {
   hasOnClickAction?: boolean;
 }
 
-export const StyledButton = styled(Button)<ThemeProp & ButtonStyleProps>`
+export const StyledButton = styled((props) => (
+  <Button
+    {..._.omit(props, [
+      "buttonVariant",
+      "buttonStyle",
+      "borderRadius",
+      "boxShadow",
+      "boxShadowColor",
+      "dimension",
+      "hasOnClickAction",
+    ])}
+  />
+))<ThemeProp & ButtonStyleProps>`
 
   background-image: none !important;
   height: ${({ dimension }) => (dimension ? `${dimension}px` : "auto")};

app/client/src/components/designSystems/blueprint/ButtonComponent.tsx

@@ -23,6 +23,7 @@ import {
 import { ThemeProp, Variant } from "components/ads/common";
 import { Toaster } from "components/ads/Toast";
 import ReCAPTCHA from "react-google-recaptcha";
+import _ from "lodash";
 import {
   ButtonBoxShadow,
   ButtonBoxShadowTypes,
@@ -163,7 +164,19 @@ const ButtonContainer = styled.div`
   }
 `;
 
-const StyledButton = styled(Button)<ThemeProp & ButtonStyleProps>`
+const StyledButton = styled((props) => (
+  <Button
+    {..._.omit(props, [
+      "prevButtonStyle",
+      "borderRadius",
+      "boxShadow",
+      "boxShadowColor",
+      "buttonColor",
+      "buttonStyle",
+      "buttonVariant",
+    ])}
+  />
+))<ThemeProp & ButtonStyleProps>`
   height: 100%;
   background-image: none !important;
   font-weight: ${(props) => props.theme.fontWeights[2]};

app/client/src/components/designSystems/blueprint/InputComponent/index.tsx

@@ -52,7 +52,20 @@ import {
  */
 
 const InputComponentWrapper = styled((props) => (
-  <ControlGroup {..._.omit(props, ["hasError", "numeric"])} />
+  <ControlGroup
+    {..._.omit(props, [
+      "hasError",
+      "numeric",
+      "labelTextColor",
+      "allowCurrencyChange",
+      "compactMode",
+      "labelStyle",
+      "labelTextSize",
+      "multiline",
+      "numeric",
+      "inputType",
+    ])}
+  />
 ))<{
   numeric: boolean;
   multiline: string;