Default value not visible

[Jaukub Kaczmarek]

I cannot get the value property od DropDownList component to work. I set the initial value to 2022 but the input is blank until I change it.

<DropDownListComponent
   dataSource={new DataManager(years)}
   placeholder='Rok'
   value={2022}
   onChange={handleChange}
/>


[Sureshkumar P]

Hi Jaukub,

We suspect that you have missed including the field property in the component. so please check the below code example and the documentation link to resolve your facing issue.

Find the code example here:

// maps the appropriate column to fields property

  const fields = { text: 'Game', value: 'Id' };

 

<DropDownListComponent

                id="games"

                dataSource={sportsData}

                ref={(dropdownlist) => {

                  listObj = dropdownlist;

                }}

                fields={fields}

                change={onChange.bind(this)}

                placeholder="Select a game"

                value={value}

                popupHeight="220px"

              />

 

Find the sample here: https://stackblitz.com/edit/react-dimf5n?file=index.js

Find the documentation here: https://ej2.syncfusion.com/react/documentation/drop-down-list/data-binding#1-array-of-simple-data

Regards,

Sureshkumar P

[Jaukub Kaczmarek]

Thanks for the answer,

So if I understand correctly there is no way of setting default value using n array of strings as data source right? I would have to map it to an array of objects and then set the fields property?

[Sureshkumar P]

Jaukub, you can set the preselected value directly without field value when the component renders with an array of string datasource,

Find the code example here:

 const sportsData = [2021, 2022, 2022, 2023, 2024];

  return (

    <div id="dropdowndefault" className="control-pane">

      <div className="control-section">

        <div className="col-lg-8">

          <div className="content-wrapper">

            <div style={{ height: '100px' }}></div>

            <div id="default">

              <DropDownListComponent

                id="games"

                dataSource={sportsData}

                ref={(dropdownlist) => {

                  listObj = dropdownlist;

                }}

                placeholder="Select a game"

                value={2022}

                popupHeight="220px"

              />

 

Find the screenshot here:

Find the modified sample here: https://stackblitz.com/edit/react-dimf5n?file=index.js

[Joy White]

How can I fix an issue where the default value of a DropDownList component is not visible—specifically, when I set the initial value to 2022 but the input remains blank until I manually change it—and could this problem be related to how values are initialized or bound in an application like the X777 Game for IOS?

[Mallesh Ravi Chandran]

From your description, it sounds like the default value (e.g., “2022”) is not appearing initially and only shows after manual interaction. 

In most cases, the root cause is one of the following:

• The value is set before the options are fully loaded.
• There’s a type mismatch between the selected value and the option values (e.g., "2022" as a string vs 2022 as a number).
• The component is using defaultValue instead of a controlled value prop, which can lead to unexpected rendering when data loads asynchronously.

To help you better, could you please share:

• A snippet of your DropDownList code (including how you set value or defaultValue).
• How the options are being loaded (static array or fetched asynchronously)?
• Does the reported scenario occur only on iOS 12 Safari/WebView, or across all platforms?
• 
  
  
  Sample : https://stackblitz.com/edit/react-dimf5n-w4m2snup?file=package.json,index.js,index.html
  
  

We have also attached a simple sample with latest version. Please modify the reported scenario in the attached sample or share the issue of replicating sample . Furthermore , please provide the video illustration of the reported scenario .  Once we have these details, we can provide a precise solution.