mantinedev / mantine

A fully featured React components library
https://mantine.dev
MIT License
26.93k stars 1.9k forks source link

Input.Wrapper label is not block #4339

Closed vaynevayne closed 1 year ago

vaynevayne commented 1 year ago

What package has an issue

@mantine/core

Describe the bug

image
 <Grid.Col md={12}>
              <Input.Wrapper label="接口权限">
                <OtherSelect />
              </Input.Wrapper>

In fact it is inline

image

What version of @mantine/hooks page do you have in package.json?

latest

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

None

Are you willing to participate in fixing this issue and create a pull request with the fix

None

Possible fix

No response

rtivital commented 1 year ago

It is correct behavior, if label was block then when user clicked on empty space it will shift focus to the input.

vaynevayne commented 1 year ago
image

so, why inputBase is block, why Input 's label is block @rtivital

 <InputBase
                label="接口权限"
                component={() => (
                  <Select
                    style={{ width: '100%' }}
                    placeholder="接口权限"
                    mode="multiple"
                    maxTagCount={'responsive'}
                    options={permissionsOptions2}
                    {...form.getInputProps('permissions')}
                  />
                )}
              />
vaynevayne commented 1 year ago

It is correct behavior, if label was block then when user clicked on empty space it will shift focus to the input.

And why is the ui effect on the document a block?