feat: remove-clear-option-for-required-select-widget

app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Childwigets/List_Select_Widgets_spec.js

@@ -149,12 +149,7 @@ describe("Select Widgets", { tags: ["@tag.Widget", "@tag.List"] }, function () {
       .first()
       .should("have.text", `undefined_undefined_true_false`);
 
-    cy.get(`${widgetSelectorByType("selectwidget")} .cancel-icon`).click({
-      force: true,
-    });
-    cy.get(`${widgetSelector("Select_Widget")} ${commonlocators.bodyTextStyle}`)
-      .first()
-      .should("have.text", `__true_false`);
+    cy.get(_.locators._selectClearButton_dataTestId).should("not.exist");
   });
 
   it("3. Select Widgets onOptionChange", function () {

app/client/cypress/e2e/Regression/ClientSide/Widgets/Select/Select2_Spec.ts

@@ -297,13 +297,7 @@ describe(
       agHelper.AssertExistingToggleState("Required", "false");
       propPane.TogglePropertyState("Required", "On");
       deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.FORM));
-      agHelper.GetNClick(widgetLocators.selectWidgetClear, 1);
-      agHelper.AssertCSS(
-        widgetLocators.selectWidgetBtn,
-        "border-color",
-        "rgb(217, 25, 33)",
-        1,
-      );
+      cy.get(locators._selectClearButton_testId).should("not.exist");
     });
   },
 );

app/client/cypress/support/Objects/CommonLocators.ts

@@ -334,4 +334,6 @@ export class CommonLocators {
   _menuItem = ".bp3-menu-item";
   _slashCommandHintText = ".slash-command-hint-text";
   _selectionItem = ".rc-select-selection-item";
+  _selectClearButton_testId = "selectbutton.btn.cancel";
+  _selectClearButton_dataTestId = `[data-testid="${this._selectClearButton_testId}"]`;
 }

app/client/src/widgets/SelectWidget/component/SelectButton.test.tsx

@@ -4,6 +4,7 @@ import { fireEvent, render } from "@testing-library/react";
 
 import type { SelectButtonProps } from "./SelectButton";
 import SelectButton from "./SelectButton";
+import { CommonLocators } from "../../../../cypress/support/Objects/CommonLocators";
 
 // It is necessary to make a mock of the Icon component as the error falls due to React.lazy in importIconImpl
 jest.mock("@design-system/widgets-old", () => {
@@ -31,6 +32,8 @@ const renderComponent = (props: SelectButtonProps = defaultProps) => {
   return render(<SelectButton {...props} />);
 };
 
+const locators = new CommonLocators();
+
 describe("SelectButton", () => {
   it("should not fire click event when disabled", () => {
     const { getByTestId, getByText } = renderComponent({
@@ -58,4 +61,24 @@ describe("SelectButton", () => {
     fireEvent.click(getByTestId("selectbutton.btn.main"));
     expect(defaultProps.togglePopoverVisibility).toBeCalled();
   });
+
+  it("should not render cancel button when select widget required is true", () => {
+    const { container } = renderComponent({
+      ...defaultProps,
+      isRequired: true,
+    });
+    expect(
+      container.querySelector(locators._selectClearButton_dataTestId),
+    ).toBeNull();
+  });
+
+  it("should render cancel button when select widget required is false", () => {
+    const { container } = renderComponent({
+      ...defaultProps,
+      isRequired: false,
+    });
+    expect(
+      container.querySelector(locators._selectClearButton_dataTestId),
+    ).not.toBeNull();
+  });
 });

app/client/src/widgets/SelectWidget/component/SelectButton.tsx

@@ -15,6 +15,7 @@ export interface SelectButtonProps {
   togglePopoverVisibility: () => void;
   tooltipText?: string;
   value?: string;
+  isRequired?: boolean;
   hideCancelIcon?: boolean;
 }
 
@@ -24,6 +25,7 @@ function SelectButton(props: SelectButtonProps) {
     displayText,
     handleCancelClick,
     hideCancelIcon,
+    isRequired,
     spanRef,
     togglePopoverVisibility,
     tooltipText,
@@ -38,7 +40,7 @@ function SelectButton(props: SelectButtonProps) {
       onClick={togglePopoverVisibility}
       rightIcon={
         <StyledDiv>
-          {!isEmptyOrNill(value) && !hideCancelIcon ? (
+          {!isEmptyOrNill(value) && !hideCancelIcon && !isRequired ? (
             <Icon
               className="dropdown-icon cancel-icon"
               data-testid="selectbutton.btn.cancel"

app/client/src/widgets/SelectWidget/component/index.tsx

@@ -425,6 +425,7 @@ class SelectComponent extends React.Component<
               displayText={value.toString()}
               handleCancelClick={this.handleCancelClick}
               hideCancelIcon={this.props.hideCancelIcon}
+              isRequired={this.props.isRequired}
               spanRef={this.spanRef}
               togglePopoverVisibility={this.togglePopoverVisibility}
               tooltipText={tooltipText}
@@ -438,44 +439,45 @@ class SelectComponent extends React.Component<
 }
 
 export interface SelectComponentProps extends ComponentProps {
+  accentColor?: string;
+  borderRadius: string;
+  boxShadow?: string;
   className?: string;
+  compactMode: boolean;
   disabled?: boolean;
-  onOptionSelected: (optionSelected: DropdownOption) => void;
-  placeholder?: string;
+  dropDownWidth: number;
+  filterText?: string;
+  hasError?: boolean;
+  height: number;
+  hideCancelIcon?: boolean;
+  isDynamicHeightEnabled?: boolean;
+  isFilterable: boolean;
+  isLoading: boolean;
+  isOpen?: boolean;
+  isRequired?: boolean;
+  isValid: boolean;
+  label?: string | number;
   labelAlignment?: Alignment;
   labelPosition?: LabelPosition;
+  labelStyle?: string;
   labelText: string;
   labelTextColor?: string;
   labelTextSize?: TextSize;
-  labelStyle?: string;
-  labelWidth?: number;
   labelTooltip?: string;
-  compactMode: boolean;
-  selectedIndex?: number;
-  options: DropdownOption[];
-  isDynamicHeightEnabled?: boolean;
-  isLoading: boolean;
-  isFilterable: boolean;
-  isValid: boolean;
-  width: number;
-  dropDownWidth: number;
-  height: number;
-  serverSideFiltering: boolean;
-  hasError?: boolean;
-  onFilterChange: (text: string) => void;
-  onDropdownOpen?: () => void;
-  onDropdownClose?: () => void;
-  value?: string | number;
-  label?: string | number;
-  filterText?: string;
-  borderRadius: string;
-  boxShadow?: string;
-  accentColor?: string;
-  isOpen?: boolean;
+  labelWidth?: number;
   onClose?: () => void;
-  hideCancelIcon?: boolean;
+  onDropdownClose?: () => void;
+  onDropdownOpen?: () => void;
+  onFilterChange: (text: string) => void;
+  onOptionSelected: (optionSelected: DropdownOption) => void;
+  options: DropdownOption[];
+  placeholder?: string;
   resetFilterTextOnClose?: boolean;
   rtl?: boolean;
+  selectedIndex?: number;
+  serverSideFiltering: boolean;
+  value?: string | number;
+  width: number;
 }
 
 export default React.memo(SelectComponent);

app/client/src/widgets/SelectWidget/widget/index.tsx

@@ -849,6 +849,7 @@ class SelectWidget extends BaseWidget<SelectWidgetProps, WidgetState> {
         isDynamicHeightEnabled={isAutoHeightEnabledForWidget(this.props)}
         isFilterable={this.props.isFilterable}
         isLoading={this.props.isLoading}
+        isRequired={this.props.isRequired}
         isValid={this.props.isValid}
         label={this.props.selectedOptionLabel}
         labelAlignment={this.props.labelAlignment}