Placeholder, caret and search in multiple select


Topic: Placeholder, caret and search in multiple select

Codewave pro asked 2 years ago

I'm trying to add my placeholder instead of "Choose your option" in MDBSelect with multiple={true} but without any success, it works fine with single choose select but fails with multiple ones.

Also, I had to change the caret in some hacky way, and the search option doesn't work in any configuration.

Here is my code:

<MDBSelect color="primary" getTextContent={this.change.bind(this)} 
multiple={typeof multi !== 'undefined' && multi} search={true}>
<MDBSelectInput selected={(this.props.value !== '') ? this.props.value : t(placeholder)}/>
<MDBSelectOptions>
{answers.map(answer =>
<MDBSelectOption key={answer} value={t(answer)} selected={this.props.value.indexOf(t(answer)) > -1}>
{t(answer)}
</MDBSelectOption>
)}
</MDBSelectOptions>
<i className="material-icons">keyboard_arrow_down</i>
</MDBSelect>

Jakub Mandra staff premium answered 2 years ago

There is next version (4.8.5) available since yesterday.

It contains upgraded Select component with props to manipulate search label and id, also problem with textContent update has been fixed.


Codewave pro answered 2 years ago

Great, thanks for all the help :)


Jakub Mandra staff premium commented 2 years ago

You're welcome.

We are always open for suggestions and bug reports, so we can continuously improve our package.

 

Take care! :)


Jakub Mandra staff premium answered 2 years ago

Hey

Search works only with our alternative Select described in our documentation. It uses object as data source (check last example and API section). 

Maybe you should try it? You will like it - it is more controllable and flexible.


Codewave pro answered 2 years ago

Ok, alternative way worked (you should add info in Select API that search works only with alternative version). Trying to figure out how to force search to work took me waaaay more time than it should.

But now I have one more question:

How do I change search label? It can't be in English in my project...

 

 

You generally have a lot of things hardcoded in English in the code, it should never be this way in world wide library....


Codewave pro answered 2 years ago

I really really need this search label changed, could you direct me to the place where I can change that? Or say that it will be possible in the next 2 weeks? Without that, I'm in a very bad place with the project.


Codewave pro answered 2 years ago

And one more thing, how to reset multiple select to show placeholder after user unchecked everything? Now it displays the last selected option, not the placeholder. The placeholder is correctly passed as the 'selected' prop.


Jakub Mandra staff premium answered 2 years ago

return (
        <div>
        <MDBSelect
            multiple
            options={this.state.options}
            selected="Choose your option"
        />
        <label>Example label</label>
        </div>
    );


According to code from Usage section of documentation:
- edit<label>Example label</label> to change element matched with green,
- edit selected="Choose your option"to change element matched with red (this is also default value of select)

alternative select


Codewave pro answered 2 years ago

I don't use the label because it's not on design, and even when the selected prop is correctly set to my placeholder it still displays the last unchecked option instead.

 

And because it seems I have hard times to explain it in English i will try in Polish:

Nie używam <label> bo nie mam tego na projekcie graficznym. A mimo wielu prób przekazania 'selected' prawidłowo, dalej wyświetla się ostatni odznaczony element w selecie zamiast mojego placeholdera. Jak wyświetlam to co przekazuję do selected nad selectem to mam parwidłową wartość po odznaczeniu wszystkiego, ale sam select to bardzo dokładnie olewa. No i dalej nie wiem jak zmienić Search na Szukaj,  a bez tego projekt nie może pójść do klienta...

 

Poniżej aktualny kod mojego selecta

<MDBSelect color="primary" getTextContent={this.change.bind(this)} getValue={this.props.getValue}
multiple={typeof this.props.multi !== 'undefined' && this.props.multi} search={true}
key={this.state.key} options={this.state.options} selected={(this.props.value !== '') ? this.props.value : this.props.place} />

Jakub Mandra staff premium answered 2 years ago

Hej,

Przepraszam, trochę się pospieszyłem z odpowiedzią, sądząc, że chodzi o label selecta.
I rzeczywiście Search ma hardcoded label, nie jest to jednak nic na tyle skomplikowanego, aby nie mogło wyjść w następnym releasie (to jest 10.12). Dodamy property do zmiany labela.
Dziękujemy za zwrócenie na to naszej uwagi.

Wszelkie sugestie mile widziane.

Co do selected, gdy wszystkie opcje są odznaczone select przyjmuje wewnętrzny state selectValue = [], a selectTextContent, wyświetlany również w inpucie powinien przyjąć wartość z property selected.


Jakub Mandra staff premium answered 2 years ago

Okej, okazało się, że w Select, którego poleciłem Tobie występuje problem z updatem zmiennej selectTextContent, więc metoda getTextContent zwracała pusty string.

Ten problem został już zaadresowany (tak samo jak poprzedni - z Search label), niestety poprawioną wersję możemy oddać do użytku dopiero w przyszły poniedziałek (10.12), dlatego prosimy o cierpliwość.

Sposób używania komponentu nie ulega zmianie.

 

Pozdrawiam


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: 4.7.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: Yes
  • Provided link: No