Skip to content

Material InputDecoration contentPadding is broken in RTL #129591

@Caffeinix

Description

@Caffeinix

Is there an existing issue for this?

Steps to reproduce

  1. Create a TextField with an InputDecoration that uses an EdgeInsetsDirectional for its contentPadding property that specifies a non-zero value for end.
  2. Set the directionality of the app to TextDirection.rtl.

Expected results

The contentPadding property should be applied the same way it is in LTR, except the left and right edges should be flipped.

Actual results

The contentPadding property appears to override some default padding in InputDecorator, causing the leading icon to be rendered outside of the field's bounding box.

Code sample

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

/// Flutter code sample for [InputDecoration].

void main() => runApp(const InputDecorationExampleApp());

class InputDecorationExampleApp extends StatelessWidget {
  const InputDecorationExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('InputDecoration Sample')),
        body: const Padding(
          padding: EdgeInsets.all(8),
          child: Column(
            children: [
              InputDecorationExample(),
              SizedBox(height: 8),
              Directionality(
                textDirection: TextDirection.rtl,
                child: InputDecorationExample(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class InputDecorationExample extends StatelessWidget {
  const InputDecorationExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const TextField(
      decoration: InputDecoration(
        // This line causes the bug.
        contentPadding: EdgeInsetsDirectional.only(end: 24),
        enabledBorder: OutlineInputBorder(),
        disabledBorder: OutlineInputBorder(),
        focusedBorder: OutlineInputBorder(),
        filled: true,
        hintText: 'Search',
        isDense: true,
        prefixIcon: Focus(child: Icon(Icons.search)),
        suffixIcon: Icon(Icons.send),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Screenshot 2023-06-26 at 6 36 21 PM

Logs

Logs

No console log messages are observed.

Flutter Doctor output

Doctor output

N/A (this can be reproduced in DartPad).

Metadata

Metadata

Assignees

Labels

a: internationalizationSupporting other languages or locales. (aka i18n)a: text inputEntering text in a text field or keyboard related problemscustomer: quake (g3)f: material designflutter/packages/flutter/material repository.found in release: 3.10Found to occur in 3.10found in release: 3.12Found to occur in 3.12frameworkflutter/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 version

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions