thibault-mahe
commented
1 year ago Hi @viCasco , thanks for your message :)
To illustrate what your saying I created a sandbox replicating the issue you're facing: https://codesandbox.io/s/vtmn-react-forked-npgqgv
There is multiple reasons explaining why the focus is cropped here:
-
First of all, the border that is added to the focus is done with an outline. The reason is that the outline does not belong to the box model of the element and therefore adding or removing an outline does not change the size of the element, which avoids unwanted visual effects at the focus. The border is therefore outside the element.
-
Secondly, the form is in the body of a modal which, for responsive design reasons (and because we don't know the content of the modal in advance) must have an overflow on the scrollable y-axis, so that the user can access the content even if the screen is too small or if there is too much content. By design and for technical reasons, the W3C spec provides that if an element has a scrollable overflow on at least one axis then it is inserted in a "block formatting context". In such context, which should be imagined as an independent box, if one of the axes is not set to "visible" then the axis set to visible will be set to "auto" by default. This is what happens here: the y-axis must be scrollable, so the x-axis cannot be "visible". So we can't see anything beyond the x-axis of our context box in our current case. (read for instance https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)
-
Finally, our concern here comes from combining these last two points: we have an element with a border outside its box model, on one of the ends of a box that leaves nothing be shown beyond.
Unfortunately, I would say that this is not a bug, it is a combination of features on which we can't do much...
The best solution would be to add a small space (padding) in the body of the modal to leave enough room for the outline of the focus elements to be visible. See the second modal here: https://codesandbox.io/s/vtmn-react-forked-npgqgv
I remain available if I misunterstood your issue or if you have any question. If this answer is Ok for you i'll close this issue.
Thanks!
Describe the bug
In the modal component having a checkbox input and receiving the focus cuts off the outer edge and also it in buttons when they occupy the full width of the modal.
Steps to reproduce Open a modal that contains checkbox and button in full width and on receiving the focus you will see that the outer edge is cut off.
Expected behavior That the checkbox and button elements do not have their outer border cut off when receiving focus in the modal.
Slack https://decathlon-design.slack.com/archives/C01LYRCQ00J/p1677169424235659