search

skratchdot / react-bootstrap-multiselect

A multiselect component for react (with bootstrap). This is a react port of bootstrap-multiselect.
http://projects.skratchdot.com/react-bootstrap-multiselect/
Other
119 stars 62 forks source link

does not show list after initial open #87

Open shorif2000 opened 6 years ago

shorif2000 commented 6 years ago

after the 1st open and close every other click it does not seem to open i can see it does not add the class open in <div class="btn-group show">

the following code is in closed state

<div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="id" aria-expanded="false"><span class="multiselect-selected-text">Column Visibility</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu" style="max-height: 200px; overflow-y: auto; overflow-x: hidden; position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 34px, 0px);" x-placement="bottom-start"></ul><ul class="multiselect-container dropdown-menu" style="max-height: 200px; overflow-y: auto; overflow-x: hidden;"><li class="active"><a tabindex="0"><label class="checkbox"><input type="checkbox" value="id"> id</label></a></li></ul></div>

the following code is in open state

<div class="btn-group show"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="id" aria-expanded="true"><span class="multiselect-selected-text">Column Visibility</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu show" style="max-height: 200px; overflow-y: auto; overflow-x: hidden; position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 34px, 0px);" x-placement="bottom-start"></ul><ul class="multiselect-container dropdown-menu" style="max-height: 200px; overflow-y: auto; overflow-x: hidden;"><li class="active"><a tabindex="0"><label class="checkbox"><input type="checkbox" value="id"> id</label></a></li></ul></div>
skratchdot commented 6 years ago

do you have an online example/demo we can checkout?

shorif2000 commented 6 years ago

@skratchdot you can see it here

Edit react-bootstrap-multiselect

direct link https://jprrxy4rwv.codesandbox.io/

it also messes up the css

skratchdot commented 6 years ago

@shorif2000 - Thanks for the link! I'm looking now. I think this is a bootstrap 3 vs 4 thing. I think react-bootstrap-multiselect only works with bootstrap 3. I will take a closer look at this. I know a few months ago, I tried upgrading the library (and adding some tests). I will take another look at the branch I created, and see if I can push a fix that works with your codebase.

shorif2000 commented 6 years ago

@skratchdot i am using bootstrap v3

skratchdot commented 6 years ago

@shorif2000 - I only asked b/c I saw bootstrap 4 in the codesandbox link.

I was able to get it working locally by making the following changes:

In package.json, change the dependencies section so it looks like:

  "dependencies": {
    "bootstrap": "^3.3.7",
    "bootstrap-multiselect": "^0.9.13-1",
    "jquery": "^3.3.1",
    "popper.js": "1.14.3",
    "prop-types": "^15.6.2",
    "react": "^16.3.2",
    "react-bootstrap": "0.32.1",
    "react-bootstrap-multiselect": "git@github.com:skratchdot/react-bootstrap-multiselect.git#v3",
    "react-bootstrap-table": "4.3.1",
    "react-dom": "16.3.2",
    "react-fontawesome": "1.6.1",
    "react-router-dom": "4.3.1",
    "react-scripts": "1.1.4",
    "react-stringify": "1.0.0"
  },

In, commsmatrix.js, remove all the lines before const statusList = [, and paste in:

/* eslint-disable */
import React, { Component } from "react";
import {
  Button,
  ButtonToolbar,
  Modal,
  Tooltip,
  OverlayTrigger,
  Checkbox
} from "react-bootstrap";
import PropTypes from "prop-types";
import FontAwesome from "react-fontawesome";
import {
  BootstrapTable,
  TableHeaderColumn,
  InsertModalHeader,
  InsertModalFooter
} from "react-bootstrap-table";
import "react-bootstrap-table/dist/react-bootstrap-table-all.min.css";
import Dropdown from "react-bootstrap/lib/Dropdown";
import MenuItem from "react-bootstrap/lib/MenuItem";
import Stringify from "react-stringify";

const jQuery = require('jquery');
// this step is important, or else bootstrap will throw an error
window.jQuery = window.$ = jQuery;
// include required js
require('bootstrap/dist/js/bootstrap.js');
require('bootstrap-multiselect/dist/js/bootstrap-multiselect.js');
// include required css
require('bootstrap/dist/css/bootstrap.css');
require('bootstrap-multiselect/dist/css/bootstrap-multiselect.css');
// now include the multiselect component
const Multiselect = require('react-bootstrap-multiselect');
skratchdot commented 6 years ago

Perhaps I should publish the v3 branch, but I wanted to figure out a better way to make it work (without using require and using import statements instead).

skratchdot commented 6 years ago

gif of it working locally:

multiselect-issue

shorif2000 commented 6 years ago

@skratchdot how do i get this locally "react-bootstrap-multiselect": "git@github.com:skratchdot/react-bootstrap-multiselect.git#v3",

this is my package.son and it does not work when i added that v3 part

{
    "name": "ccp",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "audit": "0.0.6",
        "axios": "^0.17.1",
        "babel-plugin-transform-regenerator": "^6.26.0",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-latest": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "bootstrap": "^4.0.0",
        "css-loader": "^0.28.8",
        "extract-text-webpack-plugin": "^3.0.2",
        "file-loader": "^1.1.6",
        "font-awesome": "^4.7.0",
        "jquery": "^3.3.1",
        "lodash": "^4.17.10",
        "moment": "^2.21.0",
        "node-sass": "^4.9.0",
        "npm": "^6.1.0",
        "npm-audit": "0.0.3",
        "popper.js": "^1.14.3",
        "postcss-cssnext": "^3.0.2",
        "postcss-import": "^11.0.0",
        "prop-types": "^15.6.0",
        "react": "^16.2.0",
        "react-bootstrap": "^0.32.1",
        "react-bootstrap-multiselect": "git@github.com:skratchdot/react-bootstrap-multiselect.git#v3",
        "react-bootstrap-table": "^4.3.1",
        "react-bootstrap-table-next": "^0.1.2",
        "react-dom": "^16.2.0",
        "react-dropzone": "^4.2.9",
        "react-fontawesome": "^1.6.1",
        "react-ga": "^2.4.1",
        "react-quill": "^1.2.3",
        "react-redux": "^5.0.6",
        "react-router": "^4.2.0",
        "react-router-dom": "^4.2.2",
        "react-scripts": "^1.1.4",
        "react-select": "^1.2.1",
        "react-stringify": "^1.0.0",
        "react-table": "^6.7.6",
        "react-tooltip": "^3.4.2",
        "react-widgets": "^4.2.2",
        "redux": "^3.7.2",
        "redux-file-upload": "0.0.19",
        "redux-form": "^7.2.3",
        "redux-logger": "^3.0.6",
        "redux-promise": "^0.5.3",
        "redux-title": "0.0.3",
        "sass-loader": "^6.0.6",
        "sugarss": "^1.0.1",
        "url-search-params": "^0.10.0",
        "webpack-dev-server": "^3.1.4"
    },
    "devDependencies": {
        "autoprefixer-loader": "^3.2.0",
        "babel-core": "^6.26.3",
        "babel-env": "^2.4.1",
        "babel-jest": "^23.2.0",
        "babel-loader": "^7.1.2",
        "babel-polyfill": "^6.26.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "bable-loader": "0.0.1-security",
        "copy-webpack-plugin": "^4.5.1",
        "enzyme": "^3.3.0",
        "html-loader": "^0.5.4",
        "html-webpack-plugin": "^2.30.1",
        "jest": "^22.4.4",
        "prettier": "1.11.1",
        "react-addons-test-utils": "^15.6.2",
        "webpack": "^3.10.0"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "jest",
        "eject": "react-scripts eject"
    },
    "jest": {
        "verbose": true,
        "testPathIgnorePatterns": [
            "/node_modules/",
            "/jspm_packages",
            "docs"
        ],
        "unmockedModulePathPatterns": [
            "./node_modules/react"
        ],
        "modulePathIgnorePatterns": [
            "./docs/assets/"
        ]
    }
}
shorif2000 commented 6 years ago

@skratchdot locally i have changed it to the following. is it correct.

/* eslint-disable */
import React, { Component } from "react";
import axios from 'axios';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router-dom';
import {
  Button,
  ButtonToolbar,
  Modal,
  Tooltip,
  OverlayTrigger,
  Checkbox
} from "react-bootstrap";
import PropTypes from "prop-types";
import {
    fetchCommsmatrixCount,
    fetchCommsmatrix,
    fetchCommsmatrixData,
    fetchCommsmatrixDataCount,
    downloadFile,
    createCommsMatrixData,
    updateCommsMatrixData,
    deleteCommsMatrixData,
    renameCommsmatrix
} from '../../actions/commsmatrices';
import { 
    fetchWorkerjob,
    addWorkerjob
} from '../../actions/worker'; 
import { fetchProtocols } from '../../actions/lists';
import FontAwesome from "react-fontawesome";
import {
  BootstrapTable,
  TableHeaderColumn,
  InsertModalHeader,
  InsertModalFooter
} from "react-bootstrap-table";
import "react-bootstrap-table/dist/react-bootstrap-table-all.min.css";
import Dropdown from "react-bootstrap/lib/Dropdown";
import MenuItem from "react-bootstrap/lib/MenuItem";
import Stringify from "react-stringify";
import ModalError from '../modalerror';
import DownloadFile from './downloadfile';
import { isIPv4, isZone, isGenericName, isPort, isRemark } from '../../scripts/validation';
import FreezeButton from './freeze_button';
import ModalConfirm from '../modalconfirm';
import CommsMatrixError from './commsmatrix_error';
import SetStatuses from './set_statuses';
import NatEditor from './nat_editor';

const jQuery = require('jquery');
// this step is important, or else bootstrap will throw an error
window.jQuery = window.$ = jQuery;
// include required js
require('bootstrap/dist/js/bootstrap.js');
require('bootstrap-multiselect/dist/js/bootstrap-multiselect.js');
// include required css
require('bootstrap/dist/css/bootstrap.css');
require('bootstrap-multiselect/dist/css/bootstrap-multiselect.css');
// now include the multiselect component
const Multiselect = require('react-bootstrap-multiselect');
skratchdot commented 6 years ago

It looks like you have bootstrap 4 in your dependencies.

You can install the v3 branch by running:

npm install --save git@github.com:skratchdot/react-bootstrap-multiselect.git#v3

Then the additional dependencies:

npm install --save jquery bootstrap@3 bootstrap-multiselect react prop-types

Also, the v3 docs are here: https://github.com/skratchdot/react-bootstrap-multiselect/tree/v3#getting-started

It looks like you are including the correct code in the commsmatrix.js file. The important part is this section:

const jQuery = require('jquery');
// this step is important, or else bootstrap will throw an error
window.jQuery = window.$ = jQuery;
// include required js
require('bootstrap/dist/js/bootstrap.js');
require('bootstrap-multiselect/dist/js/bootstrap-multiselect.js');
// include required css
require('bootstrap/dist/css/bootstrap.css');
require('bootstrap-multiselect/dist/css/bootstrap-multiselect.css');
// now include the multiselect component
const Multiselect = require('react-bootstrap-multiselect');

and adding /* eslint-disable */ to the top of the file. You can remove that at some point, but it was causing too many errors for me (and I didn't feel like cherry-picking which errors to ignore- so I ignored them all).

skratchdot commented 6 years ago

Perhaps this weekend I will have time to publish the v3 branch (to make this easier for you). I can also look into seeing how hard it will be to add bootstrap 4 support (perhaps it already works).

shorif2000 commented 6 years ago

@skratchdot yh i think im using bootstrap 4, in my react app and bootstrap 3 in the old version. so i got confused. the following doesn't work

 # npm install --save git@github.com:skratchdot/react-bootstrap-multiselect.git#v3
npm ERR! code ENOLOCAL
npm ERR! Could not install from "github.com:skratchdot/react-bootstrap-multiselect.git#v3" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     /opt/SP/wwwadm/home/.npm/_logs/2018-07-05T13_14_56_025Z-debug.log

moving to bootstrap 3 seems to mess up all the css.

skratchdot commented 6 years ago

@shorif2000 - You should be able to do something like this as well:

npm install --save skratchdot/react-bootstrap-multiselect#v3

Basically, you just need to install this branch: https://github.com/skratchdot/react-bootstrap-multiselect/tree/v3

Follow the npm instructions for doing so: https://docs.npmjs.com/files/package.json#git-urls-as-dependencies

There's definitely a package.json in that git branch