Почему display: flex ломает textbox?

Question

[Kenovel]

Всем привет, у меня есть некоторое непонимание принципа работы Flexbox и это проявляется в следующем: у меня на странице есть textbox div, который вложен в form и над всем этим есть wrapper. При задании form (.input-form) стиля display: flex возникает такая ситуация, что можно кликнуть за пределами textbox в любом месте wrapper'а и тем самым активировать ввод в textbox
К слову, если убрать padding'и с .write-not-field, то проблема не возникает.
Такое чувство, что textbox заполняет весь flex контейнер, но визуально это не отображается

<div className="write-note-field">
        <form id="note-editor-wrapper" className="input-form" >
                <div contentEditable="true" id="note-editor" role="textbox" tabIndex={0}></div>
        </form>
</div>

.write-note-field {
    padding: 16px 32px;
}

.write-note-field .input-form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 6px;
    border: #9b9b9b 1px solid;
    border-radius: 6px;
    cursor: text;
}

Comments

[Ankhena]

Проблему воспроизвести не получилось.
Сделайте песочницу с демонстрацией на codepen.io

[Kenovel]

https://codepen.io/Kenovel/pen/OJwEmJw

клик внутри write-note-field активирует ввод, при повторном клике ввод деактивируется. Если нажать за пределами write-not-field, то можно повторить сначала

Answer 1

[Денис]

Эта скорее всего, связана с тем, что свойство display: flex заставляет элемент формы стать flex container, что означает, что его дочерние элементы будут рассматриваться как flex items. В результате div с атрибутом contentEditable занимает всю ширину контейнера и становится кликабельным.

Одним из решений этой проблемы может быть задание div с атрибутом contentEditable определенной ширины, чтобы он занимал только то пространство, которое ему необходимо. Кроме того, можешь установить свойство display div в inline-block, чтобы он не занимал всю ширину контейнера.

Еще можно обернуть в div и установить в качестве flex-элемента вместо элемента формы. Таким образом, на div не будут влиять flex-свойства элемента формы.

Также можешь добавить свойство pointer-events: none к родительскому элементу, чтобы сделать его не реагирующим на щелчки, это сделает дочерний элемент реагирующим на щелчки.

В общем, есть несколько различных способов решения этой проблемы, но главное убедиться, что div с атрибутом contentEditable занимает только необходимое ему пространство, а не всю ширину контейнера.

Comments

[Ankhena]

Кроме того, можешь установить свойство display div в inline-block, чтобы он не занимал всю ширину контейнера.

Это вы флекс-элемент собрались делать инлайн-блочным?

И он и так не займет всю ширину, если об этом не попросить специально.

[Kenovel]

inline-block помог, но пришлось наделать костылей

Answer 2

[Sozdavan]

Проблема, с которой вы сталкиваетесь, вероятно, вызвана тем, что контейнер .write-note-field имеет отступы, из-за чего элемент .input-form внутри него занимает больше места, чем кажется визуально. Когда вы устанавливаете для свойства display элемента .input-form значение flex, он занимает всю ширину и высоту родительского контейнера с отступом, поэтому вы можете щелкнуть за пределами текстового поля и активировать его. Одним из решений этой проблемы может быть удаление заполнения из контейнера .write-note-field. Как вы заметили, это решит проблему, но может не дать желаемого визуального результата. Другим решением было бы добавить указатель-events: none; в контейнер .write-note-field. Это предотвратит регистрацию кликов на контейнере и, таким образом, предотвратит активацию ввода. Другим решением было бы добавить div-обёртку вокруг формы и присвоить ей класс, например:

<div class="form-wrapper">
    <form id="note-editor-wrapper" className="input-form" >
            <div contentEditable="true" id="note-editor" role="textbox" tabIndex={0}></div>
    </form>
</div>

Затем вы можете указать div-обёртке position: relative и элемент формы position: absolute, с шириной и высотой 100%. Это приведет к тому, что элемент формы полностью заполнит div-обёртку и, таким образом, сделает невозможным активацию ввода, нажав на обёртку:

.form-wrapper {
    position: relative;
}
.input-form {
    position: absolute;
    width: 100%;
    height: 100%;
}

Вы также можете попытаться указать максимальную ширину и максимальную высоту для элемента формы, чтобы он не смог заполнить всю div-обёртку:

.input-form {
    max-width: 100%;
    max-height: 100%;
}

Вы также можете попытаться указать минимальную ширину и минимальную высоту для элемента формы, чтобы он не смог заполнить весь div-обёртку

.input-form {
    min-width: 100%;
    min-height: 100%;
}

Вы также можете попытаться указать ширину и высоту элемента формы, чтобы он не смог заполнить весь div-обёртку

.input-form {
    width: 100%;
    height: 100%;
}

Вы можете попробовать эти методы и выбрать тот, который лучше всего соответствует вашим потребностям

Comments

[Kenovel]

Если я делал все правильно, то:
1) удаление заполнения из контейнера .write-note-field абсолютно ничего не поменяло на странице
2) input-form улетает под экран. (появляется полоса прокрутки) и каждый раз при цикле клик внутри, клик снаружи бесконечно растягивает экран. Так и должно быть?
3-4-5) ничего не меняют