Not working on react

[melvinotieno]

I have added all the dependencies required in react including jquery. However, the select is never rendered on the browser

[ismailcse11]

Any update?

[melvinotieno]

nope still not working

[marlenesco]

The component works fine with the Boostrap 3 but it doesn't want to work with the bootstrap 4, a strange behavior.

[jebbard]

Still not reliably working with Chrome 91.0.4472.114, Bootstrap 4.3.1 and React v16.11. However, I got it displayed when using it on "top-level" of the component hierarchy, i.e. directly in the JSX of a component mounted in the router. If I place it into a child of this level, it also disappears for me. Any plans to fix this? Any news from other guys experiencing the issue? Any workarounds known? Or is there a good alternative on the market which I just wasn't able to find?

[jebbard]

Just an update from my end: I found out that it seems to work if you DO NOT use any hooks in the react component containing the selectpicker. So once I commented out const { t } = useTranslation(...) it displays for me and works as expected. I guess that might at least open up some possibilities, at least for use in child componnents which usually do not need too many hooks (despite, probably, i18n stuff...).

Here an example component were I got it running with the setup mentioned in my previous post:

import React from 'react';
import { AttributePropertiesTO } from '../../services/utils/lists/api/AttributePropertiesTO';

type FilterSearchViewProps = {
    selectedAttributId: string;
    attributes: AttributePropertiesTO[];
};

export default function FilterSearchView(props: FilterSearchViewProps) {
    //const { t } = useTranslation(NS_ENUMS.name);

    return (
        <select className="selectpicker" data-live-search="true">
            <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
            <option data-tokens="mustard">Burger, Shake and a Smile</option>
            <option data-tokens="frosting">Sugar, Spice and all things nice</option>
        </select>
    );
}

[NicolasCARPi]

This might help: https://github.com/snapappointments/bootstrap-select/issues/2328#issuecomment-616293733

[gys-dev]

For me I import load script at useEffect function and it's seem work correctly.

import React, {useEffect} from "react";
import $ from "jquery"
import "bootstrap-select/dist/css/bootstrap-select.min.css";
import "bootstrap-select/dist/js/bootstrap-select";
const dialCodes = require("../assets/dial.json");

export default function PhoneCodeSelector({
    phone_code,
    handleInputChange
}) {
  useEffect(() => {
    $('.selectpicker').selectpicker(); // -> add load script. Magic here
    $('.bootstrap-select ul.dropdown-menu').addClass("show"); // -> Fix picker dropdown don't render data
  }, [])
    return (
        <select 
        value = {phone_code}
        type="select" 
        name="phone_code"
        style = {{maxWidth: '200px'}} 
        className  = "selectpicker"
        onChange={handleInputChange}
      >
        {dialCodes.map(dial => (
            <option 
              value = {dial.dial_code} 
              key = {`phone_key_${dial.dial_code}`}
              title = {dial.dial_code}
              data-content = {`<div class = \'d-flex justify-content-between\'> <span>${dial.name}</span> <span>${dial.dial_code}</span> </div>`}
            >
              {`${dial.dial_code} (${dial.name})`}
            </option>
        ))}
      </select>
    )
}

[shravan20]

I am still facing this issue with React 16+, is there any way to resolve this? Has anyone found any resolution to this?

import React, { useEffect, useRef } from "react";
import $ from "jquery";
import "bootstrap-select/dist/css/bootstrap-select.min.css";

const BootstrapSelectComponent = ({ options }) => {
  const selectRef = useRef(null);

  useEffect(() => {
    console.log("ref", selectRef.current);

    const initializeSelectPicker = () => {
      if (selectRef.current) {
        $(selectRef.current).selectpicker();
      }
    };

    $(document).ready(initializeSelectPicker);

    return () => {
      $(selectRef.current).selectpicker("destroy");
    };
  }, []); 

  return (
    <select ref={selectRef} className={`selectpicker`} data-live-search="true">
      {options.map((option, index) => (
        <option key={index}>{option}</option>
      ))}
    </select>
  );
};

export default BootstrapSelectComponent;

Any help here would be really appreciated.