JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css">
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
<div class="container m-1">
  <div class="row">

    <form id="form-crew">
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="[email protected]">
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
      </div>

      <div class="mb-3">
        <label for="crew-select">Crew Selection</label>
        <select data-bs-toggle="ts-select" name="crew-select" id="crew-select" aria-label="Select Members" multiple placeholder="Select members...">
          <option value="">Select members...</option>
          <option value="AAA" data-captain="true" data-drivers-license="true">AAA</option>
          <option value="BBB" data-captain="false" data-drivers-license="true">BBB</option>
          <option value="CCC" data-captain="false" data-drivers-license="false"  selected>CCC</option>
        </select>
      </div>

      <div class="mb-3 form-check">
        <input type="checkbox" name="checkbox-01" class="form-check-input" id="exampleCheck1" checked>
        <label class="form-check-label" for="exampleCheck1">Check me in</label>
      </div>




      <div class="mb-3">

        <label for="crew-select">More Crews</label>

        <select data-bs-toggle="ts-select" name="crew-select-more" id="crew-select-more" aria-label="Select a Member" data-placeholder="Select a member...">
          <option value=""></option>
          <option value="AAA" data-captain="true"...

CSS

.plugin-clear_button.single .clear-button {
  /*fix fault in plugin css should be 0px for calculations */
  --ts-pr-caret: 0px;
}

/* bootstapping */


select[data-bs-toggle="ts-select"]+.ts-wrapper .ts-control {

  display: flex;
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z'%3E%3C/path%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 24px;
}

.ts-control input {
  color: var(--bs-secondary-color);
  font-size: 1rem;
  opacity: 1;
}

.ts-control .item {
  font-size: 1rem;
  font-weight: 400;
}
.has-item .ts-control{
  background-image:none;
}

.focus .ts-control {
    
    cursor: text;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 10.8284L7.04996 15.7782L5.63574 14.364L11.9997 8L18.3637 14.364L16.9495 15.7782L11.9997 10.8284Z'%3E%3C/path%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 24px;
}

JavaScript

// testing tom-select https://tom-select.js.org/

function initForm() {

  //caching
  const selects = document.querySelectorAll('select[data-bs-toggle="ts-select"]');
  const form = document.querySelector('#form-crew');

  //add tom-select to selecs:
  selects.forEach((el) => {
    let settings = {
      plugins: {
        'clear_button': {
          'title': 'Remove all selected options'
        },
        'dropdown_input':{}
      },
           
      onClear: () =>{
      
				el.electedIndex = 0;
      },
      onInitialize: ()=>{
      
      // we cache the initial selected value
      // since with clearing and pressing reset button the value will not come back: 
      el.setAttribute('data-preselected-value', el.value);
      console.log(el.tomselect.control_input);
el.tomselect.control_input.focus({preventScroll: true});
      
      }, 
      onFocus: ()=>{
      
      console.log(checkIOSVersion());
      
      }

    };
    
    // attach tomselect to the element
   new TomSelect(el, settings);  
   
    
  });


 // form processing:
  form.addEventListener('submit', (event) => handleFormSubmit(event, form));
  form.querySelector('#form-reset').addEventListener('click', (event) => handleFormReset(event, form));

}


// initialise the form
initForm();




// functions for eventlsteners
function handleFormSubmit(event, form) {

  console.log('process form data...');

	// Prevents the default form submission
  event.preventDefault(); 

  let formData = new FormData(form);
	let fields ="";
  
  // for showing the fields and their values for form submission
  for (let pair of formData.entries()) {
    console.log(pair[0] + ': ' + pair[1]);
    fields += `Field: ${pair[0]} : ${pair[1]}\n`;
  }

  alert(fields);
}


// reset form elements using the reset button
function handleFormReset(event, form) {

 console.log('resetting...');

 
 // for reset we unclear the cleared items and get it back to the original state
selects =...