[autocomplete] Fix ArrowLeft crash when value is not set with single-value rendering (#47214)

Co-authored-by: ZeeshanTamboli <[email protected]>

Author: rithik56

packages/mui-material/src/Autocomplete/Autocomplete.test.js

@@ -3683,6 +3683,49 @@ describe('<Autocomplete />', () => {
 
       expect(view.container.querySelector(`.${chipClasses.root}`)).to.have.text('0');
     });
+
+    it('should not throw error on pressing ArrowLeft key with no value in single value rendering', () => {
+      render(
+        <Autocomplete
+          options={['one', 'two', 'three']}
+          renderValue={(value, getItemProps) => {
+            return value ? <Chip label={value} {...getItemProps()} /> : null;
+          }}
+          renderInput={(params) => <TextField {...params} autoFocus />}
+        />,
+      );
+
+      const textbox = screen.getByRole('combobox');
+
+      expect(() => {
+        fireEvent.keyDown(textbox, { key: 'ArrowLeft' });
+      }).not.to.throw();
+
+      expect(textbox).toHaveFocus();
+    });
+
+    it('should not throw error on pressing ArrowLeft key with input text but no value in single value rendering', () => {
+      render(
+        <Autocomplete
+          options={['one', 'two', 'three']}
+          renderValue={(value, getItemProps) => {
+            return value ? <Chip label={value} {...getItemProps()} /> : null;
+          }}
+          renderInput={(params) => <TextField {...params} autoFocus />}
+        />,
+      );
+
+      const textbox = screen.getByRole('combobox');
+
+      fireEvent.change(textbox, { target: { value: 'on' } });
+
+      expect(() => {
+        fireEvent.keyDown(textbox, { key: 'ArrowLeft' });
+      }).not.to.throw();
+
+      expect(textbox).to.have.property('value', 'on');
+      expect(textbox).toHaveFocus();
+    });
   });
 
   it('should not shrink the input label when value is an empty array in multiple mode using renderValue', () => {

packages/mui-material/src/useAutocomplete/useAutocomplete.js

@@ -853,7 +853,7 @@ function useAutocomplete(props) {
           handleOpen(event);
           break;
         case 'ArrowLeft':
-          if (!multiple && renderValue) {
+          if (!multiple && renderValue && value != null) {
             focusItem(0);
           } else {
             handleFocusItem(event, 'previous');