Skip to content

DropdownButtonFormField InkWell spreads to error message #106659

@BananaMasterz

Description

@BananaMasterz

Steps to Reproduce

  1. Execute flutter run on the code sample
  2. Tap on the drop down field to trigger the validation and notice that the inkwell spreads to the "Required" error message.

Expected results:
The inkwell should be contained within the border of the text field as in the normal text fields when you mouse over.

Actual results:
As seen in the screenshots, the inkwell spreads to the error message

image

Code sample
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    var items = [
      'Ayo',
      'This',
      'Don',
      'Look',
      'Right',
    ].map((String val) {
      return DropdownMenuItem(
        value: val,
        child: Text(
          val,
        ),
      );
    }).toList();

    return MaterialApp(
      title: _title,
      theme: ThemeData(
        inputDecorationTheme: const InputDecorationTheme(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(32)),
            borderSide: BorderSide(color: Colors.blue, width: 2),
          ),
        ),
      ),
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 500,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Form(
                  key: _formKey,
                  child: DropdownButtonFormField(
                    onTap: () {
                      _formKey.currentState!.validate();
                    },
                    validator: (String? v) => 'Required',
                    onChanged: (String? value) {},
                    items: items,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemsf: material designflutter/packages/flutter/material repository.found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages team

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions