получить выбранное выпадающее значение в поле ввода вместо заполнителя, используя JavaScript

Question

Я хочу выпадающий список с переключателем, который должен отображаться при щелчке по полю и скрываться при щелчке снаружи и получать выбранное значение в поле ввода. У меня есть частично рабочий код.

1. Я не могу скрыть раскрывающийся список после его открытия.
2. Мне нужно выбранное значение в поле ввода вместо значения заполнителя, которое у меня есть.

Я вижу много ответов для раскрывающегося списка опций выбора, но не для метки-заполнителя.

//Not sure why the above function is not hiding the dropdown
RadioDdOnclick() {
  var x=document.getElementById("radiobtn");
  if (x.style.display==="none") {
    document.getElementById('RadioDd').style.visibility='hidden'; //i tried style.display ='none';
  }
  else {
    document.getElementById('RadioDd').style.display='block';
  }
}

<div className="inputWithIcon" onClick={this.RadioDdOnclick} id="radiobtn">
  <input className="inputBlock" id="radioSelect" type="text" placeholder="choose one" />
  <i className="fa fa-angle-down" />
</div>

<div className={ "BudgetRadioDd"} id={ "RadioDd"} style={{display: 'none'}}>
  <fieldset>
    <h4>options to choose</h4>
    <div>
      <label><input type="radio" id="1"/>option 1</label>
    </div>
    <div>
      <label> <input type="radio" id="2" />option 2</label>
    </div>
    <div>
      <label><input type="radio" id="3"/>option 3</label>
    </div>

  </fieldset>

</div>

//css code here
    .input[type=text]{
  width:100%;
  border:2px solid #aaa;
  border-radius:4px;
  margin:8px 0;
  outline:none;
  padding:8px;
  box-sizing:border-box;
  transition:.3s;
}

.inputWithIcon{
  position:relative;
}

.inputWithIcon i{
  position:absolute;
  right: 3%;
  top: 0;
  font-size: 25px;
  padding: 20px 8px;
  color:#c69937;
  transition:.3s;
}

обновление Ниже приведен ответ, но он отображает значение радиосвязи в другом компоненте div.

В поисках лучшего решения ..

добавление ссылки для просмотра вопроса: https://stackblitz.com/edit/react-feubq6?file=index.js

Answer 1

Я обновил ваш код и упростил его до HTML для простоты.Пожалуйста, проверьте:

function RadioDdOnclick(event) {
  const hovered = document.querySelectorAll(':hover');

  if (hovered[hovered.length - 1].type !== 'radio') {
    const x = document.querySelector('#RadioDd');
    const toggleMap = {
      none: 'block',
      block: 'none'
    };
  
    x.style.display = toggleMap[x.style.display];
  }
}

document.querySelectorAll('[type=radio]').forEach(r => {
  r.onclick = _ => {
    if (r.checked) {
      document.querySelector('#radioSelect').value = r.value;
    }
    document.querySelector('#RadioDd').style.display = 'none';
  }
});

<div class="inputWithIcon" id="radiobtn">
  <input className="inputBlock" 
         id="radioSelect" 
         type="text" 
         onClick="RadioDdOnclick(event)" 
         onBlur="RadioDdOnclick(event)" 
         placeholder="choose one" />
  <i className="fa fa-angle-down" />
</div>

<div class="BudgetRadioDd" id="RadioDd" style="display: none">

  <fieldset>
    <h4>options to choose</h4>
    <div>
      <label>
        <input name="budget" type="radio" id="1" value="option 1"/>
        option 1
      </label>
    </div>
    <div>
      <label> 
        <input name="budget" type="radio" id="2" value="option 2"/>
        option 2
      </label>
    </div>
    <div>
      <label>
        <input name="budget" type="radio" id="3" value="option 3"/>
        option 3
      </label>
    </div>
  </fieldset>

</div>