Inconsistent height after adding child controls to the input box

[lasifea]

Duplicate Check

• I have searched the opened issues and there are no duplicates

Describe the bug

When I add a button control to the suffix of the TextField control, the height of the control is inconsistent with the height of the control without adding a suffix. I don't think this is a bug, but it has some impact on the appearance.
(From machine translation, if the expression is not straightforward, please understand)

Code sample

Code

import flet as ft

def main(page: ft.Page):
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    # page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.window.width = 600
    page.window.height = 600
    page.padding = 50
    page.spacing = 20

    def btn_clicked(e: ft.ControlEvent):
        if btn.text == '错误信息提示':
            user_input.error_text = 'something wrong!'
            contact_input.error_text = 'something wrong!'
            verify_input.error_text = 'something wrong!'
            btn.text = '还原'
        else:
            user_input.error_text = ''
            contact_input.error_text = ''
            verify_input.error_text = ''
            btn.text = '错误信息提示'
        page.update()

    user_input = ft.TextField(label='请输入用户名', prefix_icon=ft.icons.PERSON, text_size=20)
    contact_input = ft.TextField(label='请输入用户绑定的邮箱或电话', prefix_icon=ft.icons.CONTACT_EMERGENCY, text_size=20,
                                 suffix=ft.Icon(ft.icons.QUESTION_MARK, color=ft.colors.SECONDARY, tooltip='对此有疑问'))
    verify_input = ft.TextField(label='请输入验证码', prefix_icon=ft.icons.KEY, text_size=20,
                                suffix=ft.FilledTonalButton('发送验证码'))
    btn = ft.ElevatedButton(text='错误信息提示', on_click=btn_clicked, height=45, width=180)

    page.add(user_input, contact_input, verify_input, btn)

if __name__ == '__main__':
    ft.app(main)

To reproduce

The height of the first input box is inconsistent with that of the third input box.

Expected behavior

I hope the default input box can maintain consistent height without manually adjusting the size of the child controls.

Screenshots / Videos

Captures

[Upload media here]

Operating System

Windows

Operating system details

Windows10

Flet version

0.24.1

Regression

I'm not sure / I don't know

Suggestions

No response

Logs

Logs

[Paste your logs here]

Additional details

No response

[InesaFitsner]

You can now add Control to suffix_icon field instead of suffix, and then the height will be the same. Let me know if it worked for you.

[lasifea]

You can now add Control to suffix_icon field instead of suffix, and then the height will be the same. Let me know if it worked for you.

I know that, if I add a custom button to the TextField component will change the height, so I can only place the button outside the TextField component. However, I still hope that the height of the TextField component will remain consistent by default after adding a custom component.

[ndonkoHenri]

What causes the increase in height is the default height of the suffix/prefix control you add, in this case the FilledTonalButton for example. To make the field keep it's "normal"/default height, you need to manually change the height of the added control.

    verify_input = ft.TextField(
        label="请输入验证码",
        prefix_icon=ft.icons.KEY,
        text_size=20,
        suffix=ft.FilledTonalButton("发送验证码", height=24),  // change height here 
    )

If it happens that you want to change the size of the text field itself (ex: to better accommodate the size of your suffix/prefix control), do this.

By the way, just for info, the TextField.text_size also influences the height of the field, but it isnt a problem in this case as all your fields have thesame value.

Closing this issue as resolved.