CakePHP Input Group z Bootstrap’em – pole input za wąskie

Problem polega na tym, że CakePHP owija pole w <div class="input"> który nie ma width: 100% w kontekście Bootstrap input-group. Rozwiązanie — użyj opcji 'templates' żeby usunąć ten wrapper:

Tak wygląda kontrolka input group dla hasła:

<div class="mb-3">
    <label for="current-password" class="form-label">
      Aktualne hasło <span class="text-danger">*</span>
    </label>
    <div class="input-group">
         <?= $this->Form->control('password', [
                   'type'         => 'password',
                   'class'        => 'form-control',
                   'label'        => false,
                   'id'           => 'password',
                   'required'     => true,
                   'autocomplete' => 'password',
                   'container'    => false,
           ]) ?>

          <button class="btn btn-light toggle-password" type="button" data-target="password" tabindex="-1">
             <i class="fa-solid fa-eye"></i>
          </button>
     </div>
</div>

Globalnie – Dodaj na początku formularza (po Form->create):

<?php
  $this->Form->setTemplates([
    'inputContainer' => '{{content}}',
    'inputContainerError' => '{{content}}',
  ]);
?>

Dla poszczególnych kontrolek:

<?= $this->Form->control('password', [
    'type' => 'password',
    'class' => 'form-control',
    'label' => false,
    'id' => 'password',
    'required' => true,
    'templates' => [
      'inputContainer' => '{{content}}',
      'inputContainerError' => '{{content}}',
    ],
]) ?>

Lub CSS

.input-group div.input {
   flex: 1 1 auto;
   width: 1%;
   min-width: 0;
}

.input-group div.input input {
   width: 100%;
}