SWIFTUI - Picker view touch/scroll-able area is still out of frame even after using clipped()

Question

SWIFTUI I have a picker view(wheel type) and I clipped() its frame to half width of the screen, and from the UI you can see its half but the scrollable area is still actionable outside that frame. How can I remove that outer area to not be scrollable?

HStack(spacing: 0) {
    Picker(selection: self.$viewModel.selectedFrameworkIndex, label: Text("")) {
    ForEach(0 ..< viewModel.Categories.count) {
        Text(self.viewModel.Categories[$0])
            .foregroundColor((self.colorScheme == .dark) ? Color.white : Color.black)
         }
    }
    .frame(width: width / 2) // width is width of my screen
    .clipped() 
}

Answer 1

Add .compositingGroup() after .clipped()

HStack(spacing: 0) {
Picker(selection: self.$viewModel.selectedFrameworkIndex, label: Text("")) {
ForEach(0 ..< viewModel.Categories.count) {
    Text(self.viewModel.Categories[$0])
        .foregroundColor((self.colorScheme == .dark) ? Color.white : Color.black)
     }
}
.frame(width: width / 2) // width is width of my screen
.clipped() 
.compositingGroup()  }    

Answer 2

Adding this extension worked for me:

extension UIPickerView {
    open override var intrinsicContentSize: CGSize {
        return CGSize(width: UIView.noIntrinsicMetric, height: super.intrinsicContentSize.height)
    }
}