QML - First TabButton is clipped by TabBar - qt

Question

I'm using Qt 5.15.
I tried using TabBar,but I found that the first TabButton is highlight but is clipped by TabBar.
Like this:
If I clicked another TabButton then click the first TabButton again, it was shown correct.
Like this:
I hope it is shown like the second picture on initial.
How can I fixed it?
My code:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Rectangle{
anchors.fill: parent
color: "yellow"
}
TabBar {
id: bar
anchors.left: parent.left
anchors.top: parent.top
anchors.margins: 20
clip:true
width: 200
Repeater {
model: ["First", "Second", "Third", "Fourth", "Fifth"]
TabButton {
text: modelData
width: implicitWidth+12
}
}
}
}

Answer 1

I couldn't find a good solution but you could change the current item to the second and then back to the first for simulating what you are doing with your mouse.
You could do this on Component.onCompleted slot :
TabBar {
id: bar
anchors.left: parent.left
anchors.top: parent.top
anchors.margins: 20
clip: true
width: 200
Repeater {
model: ["First", "Second", "Third", "Fourth", "Fifth"]
TabButton {
text: modelData
width: implicitWidth+12
}
}
Component.onCompleted: {
currentIndex = 1
currentIndex = 0
}
}