My application development journey began with cloning code from https://github.com/DMPRoadmap/roadmap.
This project is based on webpack and npm.
To integrate select2, I executed npm install select 2 in the lib/assets directory.
I aimed to incorporate a multi-select search field into my project's details page (located at
app/views/plans/_edit_details.html.erb
<%= f.select(:my_options,
options_for_select({first_option: '123'}, ['123']),
{},
{ id: 'select-field',
class: 'form-control',
multiple: 'multiple' }) %>
Additionally, I updated the corresponding JavaScript file (
lib/assets/javascripts/views/plans/edit_details.js
// Set up Select2 for the multi-select search field
$('#select-field').select2({
placeholder: 'Please enter text',
});
I also included the required imports for webpack to recognize the needed code:
import 'select2/dist/js/select2';
import 'select2/dist/css/select2.css';
Since this project solely uses sass, I integrated the CSS loader in the webpack configuration file (lib/assets/webpack.config.js):
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
},
},
// The above code was the previous setup, below is the new addition
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
},
Upon implementing the new css loader, the multi-select search function started working. However, the tinymce text area box in the application suddenly stopped functioning.
I am perplexed by this issue and unsure where to begin troubleshooting it. Any guidance on what I might have done wrong would be greatly appreciated!
Thank you!