Selected Value Not Displayed in Select Bar

[quannhg]

Selected Value Not Displayed in Select Bar

Bug Description

I encountered an issue while attempting to build a shop select bar with options for individual shops and 'all'. The code snippet provided below results in an error where the selected option is not displayed, except for the 'all' option.

import { Select, Option } from '@material-tailwind/react';
import { useState } from 'react';

export const TestSelectShop = () => {
  const [selectedShop, setSelectedShop] = useState<Record<string, string> | 'all'>('all');
  const shops = [
    { name: 'Jangnam', id: 'jnId' },
    { name: 'Coffin', id: 'cfId' },
    { name: 'Six', id: 'sId' }
  ];
  const handleSelectShop = (shopId: string | 'all') => {
    setSelectedShop(shops[shops.findIndex((shop) => shop.id === shopId)]);
  };

  return (
    <Select
      onChange={(value) => handleSelectShop(value || 'all')}
      label='Shop'
      variant='standard'
      value={selectedShop === 'all' ? 'all' : selectedShop.id}
    >
      <Option value='all'>All</Option>
      {shops.map((shop, idx) => (
        <Option key={idx} value={shop.id}>
          {shop.name}
        </Option>
      ))}
    </Select>
  );
};

Note: The highlighted option is not due to hovering; the option has been selected.

However, when I modify the code to create a new array containing all the options, everything works as expected:

import { Select, Option } from '@material-tailwind/react';
import { useState } from 'react';

export const TestSelectShop = () => {
  const [selectedShop, setSelectedShop] = useState<Record<string, string> | 'all'>('all');
  const shops = [
    { name: 'Jangnam', id: 'jnId' },
    { name: 'Coffin', id: 'cfId' },
    { name: 'Six', id: 'sId' }
  ];
  const handleSelectShop = (shopId: string | 'all') => {
    if (shopId !== 'all') setSelectedShop(shops[shops.findIndex((shop) => shop.id === shopId)]);
    else setSelectedShop('all');
  };

  const allShops = [...shops, { name: 'All', id: 'all' }];

  return (
    <Select
      onChange={(value) => handleSelectShop(value || 'all')}
      label='Shop'
      variant='standard'
      value={selectedShop === 'all' ? 'all' : selectedShop.id}
    >
      {allShops.map((shop, idx) => (
        <Option key={idx} value={shop.id}>
          {shop.name}
        </Option>
      ))}
    </Select>
  );
};

Explanation

This unexpected behavior raises questions about the underlying cause. It seems that the original code does not handle the selected option correctly, with the exception of the 'all' option. The working code, which creates a new array with all options, resolves the issue.

Request for Assistance

I would appreciate any insights or explanations regarding this unexpected behavior. Thank you for your assistance.

[53422245]

I also encountered a similar issue. I temporarily resolved it by not using the value attribute and instead using the selected function. Unfortunately, I didn't have enough time to investigate the root cause.

[Kazilsky]

Still a burning question? Caught up with it yesterday and was a bit lost, but after brainstorming I found a solution. It worked for me. But I took the array from fetch