Keyboard dismissal fixes #12
@@ -2,7 +2,7 @@
|
|||||||
///
|
///
|
||||||
/// This enumeration is designed to work with focus state property wrapper, enabling programmatic
|
/// This enumeration is designed to work with focus state property wrapper, enabling programmatic
|
||||||
/// control of keyboard focus between different text input fields when editing todo tasks.
|
/// control of keyboard focus between different text input fields when editing todo tasks.
|
||||||
enum InputFieldFocus {
|
enum InputFieldFocus: Hashable, Sendable {
|
||||||
/// The note text field has keyboard focus.
|
/// The note text field has keyboard focus.
|
||||||
///
|
///
|
||||||
/// This case represents the optional multi-line note field where users can
|
/// This case represents the optional multi-line note field where users can
|
||||||
|
|||||||
@@ -1,43 +0,0 @@
|
|||||||
import SwiftUI
|
|
||||||
|
|
||||||
/// A view modifier that resigns the first responder status when the view is tapped.
|
|
||||||
///
|
|
||||||
/// This modifier is useful for dismissing the keyboard or other input controls
|
|
||||||
/// when the user taps on an area of the view that doesn't have interactive content.
|
|
||||||
struct ResignFocusModifier: ViewModifier {
|
|
||||||
|
|
||||||
// MARK: Body
|
|
||||||
|
|
||||||
/// The content and behavior of the view modifier.
|
|
||||||
///
|
|
||||||
/// Adds a tap gesture that sends the `resignFirstResponder` action
|
|
||||||
/// to dismiss any active first responder (such as a text field).
|
|
||||||
func body(content: Content) -> some View {
|
|
||||||
content
|
|
||||||
.onTapGesture {
|
|
||||||
UIApplication.shared.sendAction(
|
|
||||||
#selector(UIResponder.resignFirstResponder),
|
|
||||||
to: nil,
|
|
||||||
from: nil,
|
|
||||||
for: nil
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// MARK: - View Extension
|
|
||||||
|
|
||||||
extension View {
|
|
||||||
|
|
||||||
/// Adds a tap gesture that resigns the first responder when the view is tapped.
|
|
||||||
///
|
|
||||||
/// This is useful for dismissing the keyboard or other input controls
|
|
||||||
/// when the user taps outside of an interactive element.
|
|
||||||
///
|
|
||||||
/// - Returns: A view that resigns first responder status on tap.
|
|
||||||
func onResignFocus() -> some View {
|
|
||||||
modifier(ResignFocusModifier())
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -49,9 +49,11 @@ struct ContentView: View {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.sheet(isPresented: $viewModel.newTaskShown) {
|
.sheet(isPresented: $viewModel.newTaskShown) {
|
||||||
|
NavigationStack {
|
||||||
NewTaskView()
|
NewTaskView()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,87 @@
|
|||||||
|
import SwiftUI
|
||||||
|
|
||||||
|
extension NewTaskView {
|
||||||
|
|
||||||
|
/// A container view that wraps form content with tap-to-dismiss keyboard functionality.
|
||||||
|
///
|
||||||
|
/// This view provides a transparent overlay that appears when any text field has focus,
|
||||||
|
/// allowing users to dismiss the keyboard by tapping anywhere outside the input fields.
|
||||||
|
/// This improves the user experience by making it easier to exit text editing mode without
|
||||||
|
/// needing to explicitly tap a "Done" button or similar control.
|
||||||
|
struct Content<Content: View>: View {
|
||||||
|
|
||||||
|
// MARK: Properties
|
||||||
|
|
||||||
|
/// Binding to track which text field currently has keyboard focus.
|
||||||
|
@FocusState.Binding
|
||||||
|
var inputFocus: InputFieldFocus?
|
||||||
|
|
||||||
|
/// The view content to display.
|
||||||
|
private let content: Content
|
||||||
|
|
||||||
|
// MARK: Initialization
|
||||||
|
|
||||||
|
/// Initializes the new task content with custom form content.
|
||||||
|
///
|
||||||
|
/// - Parameters:
|
||||||
|
/// - inputFocus: A binding to track keyboard focus state
|
||||||
|
/// - content: A closure that provides the view content to render
|
||||||
|
init(
|
||||||
|
inputFocus: FocusState<InputFieldFocus?>.Binding,
|
||||||
|
@ViewBuilder content: () -> Content
|
||||||
|
) {
|
||||||
|
self._inputFocus = inputFocus
|
||||||
|
self.content = content()
|
||||||
|
}
|
||||||
|
|
||||||
|
// MARK: Body
|
||||||
|
|
||||||
|
/// The view's body that combines the form content with a dismissal overlay.
|
||||||
|
///
|
||||||
|
/// This approach allows users to tap anywhere on the screen to exit text editing
|
||||||
|
/// mode, which is particularly useful on iOS where the keyboard can obscure
|
||||||
|
/// significant screen space.
|
||||||
|
var body: some View {
|
||||||
|
ZStack {
|
||||||
|
content
|
||||||
|
|
||||||
|
if inputFocus != nil {
|
||||||
|
Color.clear
|
||||||
|
.contentShape(Rectangle())
|
||||||
|
.onTapGesture {
|
||||||
|
inputFocus = nil
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// MARK: - Previews
|
||||||
|
|
||||||
|
#Preview("New todo task content") {
|
||||||
|
struct PreviewWrapper: View {
|
||||||
|
@FocusState
|
||||||
|
private var inputFocus: InputFieldFocus?
|
||||||
|
|
||||||
|
var body: some View {
|
||||||
|
NewTaskView.Content(inputFocus: $inputFocus) {
|
||||||
|
Form {
|
||||||
|
TextField(
|
||||||
|
"Title",
|
||||||
|
text: .constant(
|
||||||
|
"Sample Task"
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.focused(
|
||||||
|
$inputFocus,
|
||||||
|
equals: .title
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return PreviewWrapper()
|
||||||
|
}
|
||||||
@@ -1,12 +1,11 @@
|
|||||||
import SwiftData
|
import SwiftData
|
||||||
import SwiftUI
|
import SwiftUI
|
||||||
|
|
||||||
/// A view for creating new todo tasks.
|
/// A view for creating new todo tasks with an intuitive form interface.
|
||||||
///
|
///
|
||||||
/// This view provides a form interface for users to input todo task details including:
|
/// This view presents a modal sheet that allows users to create new todo tasks by providing
|
||||||
/// - *Title* (required)
|
/// task details through a structured form. The view integrates with SwiftData for persistence
|
||||||
/// - *Note* (optional)
|
/// and implements smart keyboard focus management for an enhanced input experience.
|
||||||
/// - *Due date* (required)
|
|
||||||
struct NewTaskView: View {
|
struct NewTaskView: View {
|
||||||
|
|
||||||
// MARK: Properties
|
// MARK: Properties
|
||||||
@@ -30,6 +29,14 @@ struct NewTaskView: View {
|
|||||||
// MARK: Initialization
|
// MARK: Initialization
|
||||||
|
|
||||||
/// Initializes a new task view with a fresh view model instance.
|
/// Initializes a new task view with a fresh view model instance.
|
||||||
|
///
|
||||||
|
/// Creates a new `NewTaskViewModel` with default values:
|
||||||
|
/// - Empty title
|
||||||
|
/// - Empty note
|
||||||
|
/// - Due date set to current date
|
||||||
|
///
|
||||||
|
/// The view model is stored as `@State` to ensure it persists across view updates
|
||||||
|
/// and maintains its state throughout the view's lifecycle.
|
||||||
init() {
|
init() {
|
||||||
_viewModel = State(initialValue: .init())
|
_viewModel = State(initialValue: .init())
|
||||||
}
|
}
|
||||||
@@ -38,15 +45,10 @@ struct NewTaskView: View {
|
|||||||
|
|
||||||
/// The content and behavior of the view.
|
/// The content and behavior of the view.
|
||||||
///
|
///
|
||||||
/// Displays a navigation stack containing a form with sections for:
|
/// Constructs a form interface wrapped in the custom content container that provides
|
||||||
/// - Task details (title and note fields)
|
/// tap-to-dismiss keyboard functionality.
|
||||||
/// - Due date picker with graphical style
|
|
||||||
///
|
|
||||||
/// The toolbar includes:
|
|
||||||
/// - Cancel button to dismiss without saving
|
|
||||||
/// - Confirm button to persist the todo and dismiss (disabled when title is empty)
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
NavigationStack {
|
Content(inputFocus: $inputFocus) {
|
||||||
Form {
|
Form {
|
||||||
Section("view.new-task.section.task") {
|
Section("view.new-task.section.task") {
|
||||||
TextField(
|
TextField(
|
||||||
@@ -91,15 +93,16 @@ struct NewTaskView: View {
|
|||||||
.datePickerStyle(.graphical)
|
.datePickerStyle(.graphical)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.navigationTitle("view.new-task.navigation.title")
|
.navigationTitle("view.new-task.navigation.title")
|
||||||
.navigationBarTitleDisplayMode(.inline)
|
.navigationBarTitleDisplayMode(.inline)
|
||||||
.onResignFocus()
|
|
||||||
.toolbar {
|
.toolbar {
|
||||||
ToolbarItem(placement: .cancellationAction) {
|
ToolbarItem(placement: .cancellationAction) {
|
||||||
Button(role: .cancel) {
|
Button(role: .cancel) {
|
||||||
dismiss()
|
dismiss()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ToolbarItem(placement: .confirmationAction) {
|
ToolbarItem(placement: .confirmationAction) {
|
||||||
Button(role: .confirm) {
|
Button(role: .confirm) {
|
||||||
viewModel.save(to: modelContext)
|
viewModel.save(to: modelContext)
|
||||||
@@ -109,7 +112,6 @@ struct NewTaskView: View {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -119,5 +121,7 @@ struct NewTaskView: View {
|
|||||||
"New todo task",
|
"New todo task",
|
||||||
traits: .emptyContainer
|
traits: .emptyContainer
|
||||||
) {
|
) {
|
||||||
|
NavigationStack {
|
||||||
NewTaskView()
|
NewTaskView()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,12 +8,6 @@ extension TaskListView {
|
|||||||
/// This view is responsible for querying and displaying the list of tasks based on the specified
|
/// This view is responsible for querying and displaying the list of tasks based on the specified
|
||||||
/// group and completion status filter. It exists as a separate view to enable dynamic query
|
/// group and completion status filter. It exists as a separate view to enable dynamic query
|
||||||
/// updates when filter parameters change.
|
/// updates when filter parameters change.
|
||||||
///
|
|
||||||
/// Task reordering is enabled based on the ``TodoGroup/canReorder`` property.
|
|
||||||
/// Groups that support reordering (``TodoGroup/today``, ``TodoGroup/upcoming``,
|
|
||||||
/// ``TodoGroup/overdue``) allow users to drag and drop tasks to change their order.
|
|
||||||
/// The ``TodoGroup/completed`` group does not support reordering as tasks are
|
|
||||||
/// displayed in chronological order by completion date.
|
|
||||||
struct Content: View {
|
struct Content: View {
|
||||||
|
|
||||||
// MARK: Type aliases
|
// MARK: Type aliases
|
||||||
@@ -124,7 +118,9 @@ extension TaskListView {
|
|||||||
items
|
items
|
||||||
}
|
}
|
||||||
.listStyle(.grouped)
|
.listStyle(.grouped)
|
||||||
.onResignFocus()
|
.onTapGesture {
|
||||||
|
resignFocus()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -139,6 +135,12 @@ private extension TaskListView.Content {
|
|||||||
// MARK: Computed
|
// MARK: Computed
|
||||||
|
|
||||||
/// A view that renders the task items with appropriate modifiers.
|
/// A view that renders the task items with appropriate modifiers.
|
||||||
|
///
|
||||||
|
/// This computed property constructs a `ForEach` view over the tasks and conditionally
|
||||||
|
/// applies the `.onMove` modifier based on the `canReorder` capability. This approach
|
||||||
|
/// ensures that:
|
||||||
|
/// - All todo task lists support swipe-to-delete via `.onDelete`
|
||||||
|
/// - Only todo task groups that can be manually reordered enable drag-and-drop via `.onMove`
|
||||||
@ViewBuilder
|
@ViewBuilder
|
||||||
var items: some View {
|
var items: some View {
|
||||||
let items = ForEach(todos) {
|
let items = ForEach(todos) {
|
||||||
@@ -158,6 +160,22 @@ private extension TaskListView.Content {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// MARK: Functions
|
||||||
|
|
||||||
|
/// Dismisses the keyboard by resigning first responder status.
|
||||||
|
///
|
||||||
|
/// This function sends a `resignFirstResponder` action through the responder chain,
|
||||||
|
/// causing any active text field or text view to resign its first responder status
|
||||||
|
/// and dismiss the keyboard.
|
||||||
|
func resignFocus() {
|
||||||
|
UIApplication.shared.sendAction(
|
||||||
|
#selector(UIResponder.resignFirstResponder),
|
||||||
|
to: nil,
|
||||||
|
from: nil,
|
||||||
|
for: nil
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// MARK: - Previews
|
// MARK: - Previews
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ struct TaskListView: View {
|
|||||||
/// - Note: The group determines which tasks are fetched, whether
|
/// - Note: The group determines which tasks are fetched, whether
|
||||||
/// completion filtering is available, and whether drag and drop reordering is enabled.
|
/// completion filtering is available, and whether drag and drop reordering is enabled.
|
||||||
init(group: TodoGroup) {
|
init(group: TodoGroup) {
|
||||||
_viewModel = .init(initialValue: ViewModel(group: group))
|
_viewModel = .init(initialValue: .init(group: group))
|
||||||
}
|
}
|
||||||
|
|
||||||
// MARK: Body
|
// MARK: Body
|
||||||
|
|||||||
Reference in New Issue
Block a user