Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Border color is wrong for a focused and hovered TextField #145897

Closed
bleroux opened this issue Mar 28, 2024 · 1 comment · Fixed by #146127
Closed

Border color is wrong for a focused and hovered TextField #145897

bleroux opened this issue Mar 28, 2024 · 1 comment · Fixed by #146127
Assignees
@bleroux
Labels
a: text input Entering text in a text field or keyboard related problems f: material design flutter/packages/flutter/material repository. found in release: 3.19 Found to occur in 3.19 found in release: 3.21 Found to occur in 3.21 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list r: fixed Issue is closed as already fixed in a newer version team-text-input Owned by Text Input team

Comments

@bleroux
Copy link
Contributor

bleroux commented Mar 28, 2024

Steps to reproduce

  1. Launch the code sample
  2. Move the mouse to hover or unhover the text field

Expected results

The input border color should be the one for focused state wheter the field is hovered or not:

image

Actual results

The input border color changes depending on the hovered state:
image

(as a long as the text field is focused the border color should not change).

Code sample

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

void main() async {
  runApp(
    const MaterialApp(
      title: 'Flutter Demo',
      home: MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: TextField(
          decoration: InputDecoration(border: OutlineInputBorder()),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

No response

Flutter Doctor output

Doctor output 
[✓] Flutter (Channel master, 3.19.0-3.0.pre.1360, on Ubuntu 23.10
    6.5.0-26-generic, locale fr_FR.UTF-8)
    • Flutter version 3.19.0-3.0.pre.1360 on channel master at
      /home/bruno/Nevercode/flutter
    • Upstream repository git@github.com:NevercodeHQ/flutter.git
    • FLUTTER_GIT_URL = git@github.com:NevercodeHQ/flutter.git
    • Framework revision 859a5ab0f5 (il y a 9 heures), 2024-03-28 00:11:23 -0400
    • Engine revision b3516c4c56
    • Dart version 3.4.0 (build 3.4.0-279.0.dev)
    • DevTools version 2.34.0-dev.12

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /media/oldhome/Android/Sdk
    • Platform android-34, build-tools 33.0.2
    • ANDROID_HOME = /media/oldhome/Android/Sdk
    • Java binary at: /media/oldhome/Produits/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • Ubuntu clang version 16.0.6 (15)
    • cmake version 3.27.4
    • ninja version 1.11.1
    • pkg-config version 1.8.1

[✓] Android Studio (version 2021.3)
    • Android Studio at /media/oldhome/Produits/android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] VS Code (version 1.87.2)
    • VS Code at /snap/code/current/usr/share/code
    • Flutter extension version 3.84.0

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 23.10 6.5.0-26-generic
    • Chrome (web)    • chrome • web-javascript • Google Chrome 122.0.6261.111

[✓] Network resources
    • All expected network resources are available.

• No issues found!
@bleroux bleroux added the in triage Presently being triaged by the triage team label Mar 28, 2024
@bleroux bleroux self-assigned this Mar 28, 2024
@bleroux bleroux added a: text input Entering text in a text field or keyboard related problems framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list found in release: 3.19 Found to occur in 3.19 team-text-input Owned by Text Input team found in release: 3.21 Found to occur in 3.21 and removed in triage Presently being triaged by the triage team labels Mar 28, 2024
@bleroux bleroux mentioned this issue Apr 2, 2024
Merged
auto-submit bot pushed a commit that referenced this issue Apr 2, 2024
@bleroux
Fix border color is wrong for a focused and hovered TextField (#146127)
0ed26dc 
## Description

This PRs fixes the active indicator color for a filled text field and the border color for an outlined text field.
Previously, when a text field was focused and hovered, the hover color was used. With this PR the focus color is used.

Screenshots for a focused and hovered text field:

| Before | After |
|--------|--------|
| ![image](https://github.com/flutter/flutter/assets/840911/aeca2b25-e28b-4609-bd47-9d72b3cfb80d) | ![image](https://github.com/flutter/flutter/assets/840911/f4331178-8f1e-4cb8-a93f-7052a6770af7)| 

</details> 

## Related Issue

Fixes #145897

## Tests

Adds 4 tests.
@bleroux bleroux added the r: fixed Issue is closed as already fixed in a newer version label Apr 2, 2024
@github-actions GitHub Actions
Copy link

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 16, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@bleroux bleroux

Labels
a: text input Entering text in a text field or keyboard related problems f: material design flutter/packages/flutter/material repository. found in release: 3.19 Found to occur in 3.19 found in release: 3.21 Found to occur in 3.21 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list r: fixed Issue is closed as already fixed in a newer version team-text-input Owned by Text Input team
Projects
Nevercode
Status: Done (PR merged)
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix border color is wrong for a focused and hovered TextField NevercodeHQ/flutter
1 participant
@bleroux