Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Error With SelectInput element

gtb pro asked 6 years ago


Hi,

I've just added a Select component, using the example provided on your website. A child of the Select is a SelectInput and this appears to have some issue in it when it renders.

<Select>
          <SelectInput value={this.state.value}></SelectInput>
          <SelectOptions>
            <SelectOption disabled>Choose your option</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 1</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 2</SelectOption>
            <SelectOption triggerOptionClick={this.optionClick}>Option nr 3</SelectOption>
          </SelectOptions>
        </Select>

The console returns this message when the component tries to render and the page is blank. The line number points to the SelectInput:

Element ref was specified as a string (selectInput) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

A brief check on the internet led to this: https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs

If I remove the SelectInput element the error goes away but obviously it isn't useful. That renders the following:

<div class="select-wrapper">
	<span class="caret">▼</span>
	<ul class="dropdown-content select-dropdown fadeElement">
		<li class="disabled" data-multiple="false"><span class="filtrable" data-multiple="false">Choose your option</span></li>
		<li data-multiple="false"><span class="filtrable" data-multiple="false">Option nr 1</span></li>
		<li data-multiple="false"><span class="filtrable" data-multiple="false">Option nr 2</span></li>
		<li data-multiple="false"><span class="filtrable" data-multiple="false">Option nr 3</span></li>
	</ul>
</div>

Any thoughts?

Thanks

 

 


Bartłomiej Malanowski staff commented 6 years ago

What's your version of React? Also, what's your version of MDB React?

Denis Correia free commented 6 years ago

I have the same problem. "react": "^ 16.4.0", React PRO: "version": "4.4.0",

Denis Correia free commented 6 years ago

I have this in production, some solution, even temporarily ...

Mikołaj Smoleński staff commented 6 years ago

Could You please downgrade Your version of React to 16.3.1? When we released our package it was the latest React version and no errors appeard. We'll try to fix that issue while preparing the next release.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags