fix: selectableTile onChange event giving old selected value (#18765)

* fix: selectableTile onChange event giving old selected value

* fix: added console for testing purpose

* fix: added test case

* fix: removed console before merge

---------

Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com>

Author: preetibansalui

packages/react/src/components/Tile/Tile-test.js

@@ -482,6 +482,25 @@ describe('Tile', () => {
     expect(tile).not.toHaveClass(`${prefix}--tile--is-selected`);
   });
 
+  it('SelectableTile Should call onChange with correct values', async () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <SelectableTile id="selectable-tile-1" onChange={onChange}>
+        Option 1
+      </SelectableTile>
+    );
+    const tile = container.firstChild;
+    await userEvent.click(tile);
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'click',
+      }),
+      true,
+      'selectable-tile-1'
+    );
+  });
+
   it('should call onKeyDown', async () => {
     const onKeyUp = jest.fn();
     render(<ExpandableTile onKeyUp={onKeyUp}>Test Content</ExpandableTile>);

packages/react/src/components/Tile/Tile.tsx

@@ -505,9 +505,12 @@ export const SelectableTile = React.forwardRef<
     ) {
       return;
     }
-    setIsSelected(!isSelected);
+    setIsSelected((prevSelected) => {
+      const newSelected = !prevSelected;
+      onChange(evt, newSelected, id);
+      return newSelected;
+    });
     clickHandler(evt);
-    onChange(evt, isSelected, id);
   }
 
   function handleKeyDown(evt) {