Add a clear button on the right side of LazyTextField

This commit is contained in:
Kenta Kubo 2023-04-25 21:57:22 +09:00
parent e28358acfe
commit 78d4cd0b09

View file

@ -22,16 +22,29 @@ struct LazyTextField {
extension LazyTextField: View { extension LazyTextField: View {
var body: some View { var body: some View {
TextField(self.title, text: self.$localText) HStack {
.focused(self.$isFocused) TextField(self.title, text: self.$localText)
.onChange(of: self.isFocused) { isFocused in .focused(self.$isFocused)
if !isFocused { if self.isFocused && !self.localText.isEmpty {
self.text = self.localText Button {
self.text.removeAll()
} label: {
Image(systemName: "xmark.circle.fill")
.foregroundColor(.primary)
.opacity(0.2)
} }
.buttonStyle(.borderless)
.hoverEffect()
} }
.onChange(of: self.text) { text in }
self.localText = text .onChange(of: self.isFocused) { isFocused in
if !isFocused {
self.text = self.localText
} }
}
.onChange(of: self.text) { text in
self.localText = text
}
} }
} }